Angular에서 동적으로 검증되는 N 레벨 양식 배열

이 튜토리얼 기사에서는 각 하위 양식과 함께 여러 하위 양식(중첩 양식)이 있는 양식을 Angular에서 사용자 지정 유효성 검사와 함께 다룰 것입니다.

문제 설명

각각 N개의 나열된 항목이 있는 N개의 하위 양식이 있는 양식을 만들고 각 양식/양식 배열에서 특정 유효성 검사와 함께 전체 양식을 한 번에 제출합니다.

사용 사례

기본 정보는 물론 다양한 주소 정보, 소득 정보, 비용 정보, 학력 정보, 질병 정보 등을 포함하는 가족 정보에 대한 게이트웨이를 만들어야 한다고 가정해 보겠습니다. 또한 각 가정에는 여러 식구가 있고 식구마다 학력, 지출, 소득 통계가 다릅니다. 모든 양식에는 N개의 세부 정보와 개별 필드가 포함되며 데이터 입력 시 동적 유효성 검사가 포함됩니다.

전제 조건

TypeScript에 대한 사전 지식

JavaScript에 대한 사전 지식

비주얼 스튜디오 코드

노드 10+ 및 NPM 5.5.1+가 설치된 Adevelopment machine

Angular에서 반응형 양식 유효성 검사를 사용하여 N 레벨 FormArray 만들기: 단계별 자습서

1단계: 새 Angular 프로젝트 만들기

app.module.ts에서 ReactiveFormsModule 및 FormsModule을 가져옵니다. 또한 AppModule의 NgModule의 imports 배열에 추가합니다

.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

2단계: App.component.ts

이제 app.component.ts에서 먼저 간단한 양식을 만들고 아래 줄을 가져온 다음 유효성 검사와 함께 이와 같은 새 양식을 추가합니다

.

import { FormArray,FormBuilder,FormControl,FormGroup,Validators } from '@angular/forms';

3단계: App.component.html

App.component.html은 확인 메시지 메시지와 함께 다음과 같아야 합니다

.

npm start 명령을 실행하고 브라우저 localhost:4200/을 엽니다 - 다음과 같이 표시되며 해당 텍스트 상자를 터치하거나 제출 버튼을 누르면 유효성 검사가 실행되어야 합니다

.

4단계: 양식 배열

"Education Details"목록을 추가해야 한다고 가정하고 FormArray로 이동하여 첫 번째 배열을 추가해 보겠습니다.

다음과 같이 양식 선언 부분에 새 멤버를 추가합니다.

educationdata: 
this.fb.array([])

5단계: 다음과 같이 FormArray 함수 선언

educationdata(): FormArray {
    return this.myForm.get('educationdata') as FormArray;
  }

6단계: 이와 같은 새 양식 만들기

neweducationdata(): FormGroup {
    return this.fb.group({
      schoolName: new FormControl(''),
      degree: new FormControl(''),
      fieldofstudy: new FormControl(''),
      startDt: new FormControl(''),
      endDt: new FormControl(''),
      grade: new FormControl(''),
      notes: new FormControl(''),
      attachmenturl: new FormControl(''),
    });
  }

7단계: 새 배열 기능 추가

educationcon(index) {
    this.educationList = this.myForm.get('educationdata') as FormArray;
    const formGroup = this.educationList.controls[index] as FormGroup;
    return formGroup;
  }

8단계: 새 어레이 기능 제거

removeeducationdata(i: number) {
    this.educationdata().removeAt(i);
  }

9단계: 다음과 같은 유효성 검사 관리 추가

educationcon(index) {
 this.educationList = this.myForm.get('educationdata') as FormArray; const formGroup = this.educationList.controls[index] as FormGroup;
    return formGroup;
}

Ts 코드는 다음과 같아야 합니다

.

HTML 코드는 다음과 같아야 합니다

.

<table
   class="table table-bordered"
   formArrayName="educationdata"
   >
   <tr>
      <th colspan="7">Add More Data:</th>
      <th width="150px">
         <button
            type="button"
            (click)="addeducationdata()"
            class="btn btn-primary"
            >
         Add More
         </button>
      </th>
   </tr>
   <tr
   *ngFor="let f of educationdata().controls; let i = index"
   [formGroupName]="i"
   >
   <td>
      School/College Name :
      <input
         type="text"
         formControlName="schoolName"
         class="form-control"
         />
   </td>
   <td>
      Degree:
      <select formControlName="degree" class="form-control">
         <option value="">Select Degree</option>
         <option value="SCHOOL">School Degree</option>
         <option value="COLLEGE">Some College</option>
         <option value="BACHELOR">Bachelor Degree</option>
         <option value="MASTER">Master Degree</option>
         <option value="PHD">PhD Degree</option>
      </select>
   </td>
   <td>
      Field Of Study:
      <input
         class="form-control"
         type="text"
         formControlName="fieldofstudy"
         />
   </td>
   <td>
      Start Date:
      <input
         class="form-control"
         type="date"
         formControlName="startDt"
         />
   </td>
   <td>
      End Date:
      <input
         class="form-control"
         type="date"
         formControlName="endDt"
         />
   </td>
   <td>
      Grade:
      <input
         class="form-control"
         type="text"
         formControlName="grade"
         />
   </td>
   <td>
      Notes:
      <textarea
         class="form-control"
         formControlName="notes"
         ></textarea>
   </td>
   <td>
      <button
         (click)="removeeducationdata(i)"
         class="btn btn-danger"
         >
      Remove
      </button>
   </td>
   </tr>
</table>

프로젝트를 실행하면 UI가 다음과 같이 표시됩니다. 저는 탭(부트스트랩 탭)을 사용했습니다. N개의 배열을 추가하고 특정 배열을 제거할 수 있습니다.

이제 중첩 배열에 유효성 검사를 추가해 보겠습니다.

1단계: 다음과 같은 표시 메시지 추가

validation_edumessage = {
    schoolName: [{ type: 'required', message: 'School Name is required' }],
    degree: [{ type: 'required', message: 'Degree is required' }],
    startDt: [{ type: 'required', message: 'Start Date is required' }]};

2단계: 그룹에서 교육에 유효성 검사 추가

neweducationdata(): FormGroup {
    return this.fb.group({
      schoolName: new FormControl('', [Validators.required]),
      degree: new FormControl('', [Validators.required]),
      fieldofstudy: new FormControl(''),
      startDt: new FormControl('', [Validators.required]),
      endDt: new FormControl(''),
      grade: new FormControl(''),
      notes: new FormControl('')}); }

3단계: 다음과 같이 양식 HTML에 유효성 검사 추가

<input type="text" formControlName="schoolName"
   class="form-control" 
   [ngClass]="{'is-invalid':
    educationcon(i).controls['schoolName'].errors &&
    (educationcon(i).controls['schoolName'].dirty ||                        educationcon(i).controls['schoolName'].touched)}"/>

  <div *ngFor="let validation of validation_edumessage.schoolName"
   class="invalid-feedback">
   <div  *ngIf="educationcon(i).controls['schoolName'].hasError(validation.type) 
&& (educationcon(i).controls['schoolName'].dirty || educationcon(i).controls['schoolName'].touched)">
 </div> </div>

UI는 다음과 같아야 합니다.

양식을 제출하면 다음과 같은 모든 데이터를 받습니다(콘솔에서 캡처)

당신에게!

샘플 소스 코드를 찾고 계십니까? 여기 있습니다: GITHUB .

지금은 그게 다야. 오늘 Angular를 사용하여 반응형 양식 유효성 검사로 N 레벨 FormArray를 만드는 방법을 배웠습니다.

마지막으로 대규모 애플리케이션이나 엔터프라이즈 소프트웨어를 다루는 경우 전문가의 도움을 받는 것이 좋습니다. 전문적인 도움의 손길을 찾고 있다면 엔터프라이즈 소프트웨어 작업 경험이 최소 5년 이상인 Samarpan Infotech 및 hire Angular developers에 문의하십시오.