Angular의 반응성 FormArray 예제

이 기사에서는 FormArray에서 유효성 검사를 만들고 적용하는 프로세스를 보여드리고자 합니다.

FormArray란?
FormArray는 FormGroup, FormControl 또는 다른 FormArray일 수 있는 AbstractControl 컬렉션을 관리하는 역할을 합니다. FormArray는 FormControl 및 FormGroup과 함께 Angular에서 양식을 정의하는 데 사용되는 세 가지 기본 빌딩 블록 중 하나입니다.

참고: 드롭다운에는 Angular Syncfusion을 사용했습니다. 해당 패키지를 설치하고 패키지를 가져오십시오. 당신은 또한 다른 패키지를 사용할 수 있습니다

양식 배열을 만드는 단계를 자세히 살펴보겠습니다

.

ㅏ. app.module.ts 파일에서 FormsModule 및 ReactiveFormsModule을 가져옵니다.

비. 이제 구성 요소 파일에서 다음과 같은 FormGroup 변수를 추가합니다.

addMemberItemInputForm = {} as FormGroup;

씨. 다음과 같은 생성자에서 FormBuilder를 호출합니다.

private formBuilder: FormBuilder

디. 이제 내가 createAddMemberItemInputForm이라는 함수를 사용한 것처럼 함수 또는 생성자에서 호출하여 양식 컨트롤을 초기화합니다. 컨트롤에 필요한 유효성 검사를 추가합니다. 여기서 itemDetails는 아래 코드에서 양식 배열로 선언되었으며 5개 행만 추가할 수 있는 양식 배열에 대한 공통 유효성 검사를 추가했습니다. 제거하거나 변경할 수 있습니다.

createAddMemberItemInputForm(){
  this.addMemberItemInputForm = this.formBuilder.group({
     memberName: ['', Validators.required],
     itemType: ['', Validators.required],
     itemDetails: this.formBuilder.array(
    [this.createEmpFormGroup()],
    [Validators.required, Validators.maxLength(5)])
   });
 }

이자형. 이제 getter를 사용하여 객체 속성을 createAddMemberItemInputForm()의 함수에 바인딩합니다. memberName 객체 속성은 get memberName()라는 함수에 바인딩됩니다.

 get memberName() {
    return this.addMemberItemInputForm.get('memberName');
 }

에프. 이와 같이 모든 컨트롤에 대해 getter 함수를 만듭니다.

g. 이제 양식 배열에는 다음 코드와 같이 양식 배열의 컨트롤을 초기화하는 데 사용되는 this.createEmpFormGroup()라는 함수가 있습니다.

createEmpFormGroup(){
   return this.formBuilder.group({
     itemName: ['', [Validators.required]],
     quantity: ['', [Validators.required, Validators.max(5)]],
     price: ['', [Validators.required]]
   })
 }

시간. 이제 다음과 같은 양식 배열 컨트롤에 대한 추가 및 삭제 행을 만듭니다.

addEmployee() {
  let newMem = this.createEmpFormGroup();
  this.itemDetails.push(newMem);
}

deleteEmployee(i: number) {
  this.itemDetails.removeAt(i);
}

나. HTML 측으로 와서 formGroup 및 formControlName을 추가합니다.

제이. 외부 양식 컨트롤 추가

<div class="col-6">
   <label class="form-label">Enter Member Name</label>
   <input type="text" class="form-control" placeholder="Member Name" formControlName="memberName">
  <label *ngIf="memberName?.invalid && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
   Team name is required.
  </label>
</div>

케이. 양식 배열의 경우 추가

<tbody formArrayName="itemDetails">
  <tr  *ngFor="let item of itemDetails.controls; let i = index" [formGroupName]="i">
   <td>
    <input type="text" class="form-control" placeholder="Enter Item Name" formControlName="itemName">
    <label *ngIf="itemDetails.controls[i].get('itemName')?.errors?.['required'] && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
     Employee name required.
  </label>
 </td>
<td>

엘. 이제 이 단계에 도달하면 적절한 유효성 검사를 통해 양식 배열을 거의 구현했습니다.

중. 실시간 미리보기가 포함된 전체 코드는 Github에서 참조할 수 있습니다.

GitHub에서 사용 가능한 코드:- [( https://github.com/justinthadathil/AngularFormArray ]

실시간 미리보기 - [( https://justinthadathil.github.io/AngularFormArray/ ]