Angular는 양식 유효성 검사기를 동적으로 변경합니다.

얼마 전에 우리는 first form in Angular .
이미 몇 가지 기본 유효성 검사기가 있지만 다른 필드를 기반으로 필드를 필수로 만들어야 하는 경우가 있습니다.

이 예에서는 확인란 값을 기반으로 두 필드의 유효성 검사를 변경하려고 합니다.

다음과 같이 보일 것입니다.

Angular 형식 정의

기본 양식을 만드는 것부터 시작하겠습니다. 이 예에서는 다음 GitHub 분기를 시작 템플릿으로 사용하겠습니다.

Angular form demo

양식 그룹을 다음과 같이 변경하고 welcome.component.ts 파일에서 변경합니다.

ourForm = new FormGroup({
  checkbox: new FormControl('', Validators.required),
  field_1: new FormControl(''),
  field_2: new FormControl('')
});

보시다시피 필수 체크박스 필드와 특정 유효성 검사가 없는 두 개의 필드가 있는 양식을 정의합니다.

이제 welcome.component.html 의 프런트 엔드에 이들을 추가해 보겠습니다.

<form
  [formGroup]="ourForm"
  (ngSubmit)="onSubmit()"
  class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md"
>
  <label>
    <input type="radio" value="1" formControlName="checkbox" (change)="radioChange()" />
    <span>Field 1</span>
  </label>
  <label>
    <input type="radio" value="2" formControlName="checkbox" (change)="radioChange()" />
    <span>Field 2</span>
  </label>
  <div
    class="text-red-500"
    *ngIf="submitted && ourForm.controls.checkbox.errors?.required"
  >
    Checkbox is mandatory
  </div>

  <label class="block mb-2 text-sm font-bold text-gray-700">
    Field 1:
    <input
      type="text"
      formControlName="field_1"
      class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
    />
  </label>
  <div
    class="text-red-500"
    *ngIf="submitted && ourForm.controls.field_1.errors?.required"
  >
    Field 1 is mandatory
  </div>

  <label class="block mb-2 text-sm font-bold text-gray-700">
    Field 2:
    <input
      type="text"
      formControlName="field_2"
      class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
    />
  </label>
  <div
    class="text-red-500"
    *ngIf="submitted && ourForm.controls.field_2.errors?.required"
  >
    Field 2 is mandatory
  </div>

  <button
    type="submit"
    class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline"
  >
    Submit
  </button>
</form>

위의 마크업에서 주목해야 할 몇 가지 사항은 이전 기사에서 본 것과 같이 formGroup을 사용한다는 것입니다.

다음으로 유효성 검사를 변경해야 하므로 확인란에 change 함수를 추가했습니다.

그런 다음 필요한 필드를 표시하기 위해 몇 가지 오류 div를 추가했습니다.

이제 ts 파일로 돌아가서 이러한 변경 사항 중 일부를 추가해 보겠습니다.

submitted: boolean = false;

radioChange() {
    if (this.ourForm.controls.checkbox.value == 2) {
        this.ourForm.controls.field_1.setValidators([Validators.nullValidator]);
        this.ourForm.controls.field_2.setValidators([Validators.required]);
    } else {
        this.ourForm.controls.field_1.setValidators([Validators.required]);
        this.ourForm.controls.field_2.setValidators([Validators.nullValidator]);
    }
    this.ourForm.controls.field_1.updateValueAndValidity();
    this.ourForm.controls.field_2.updateValueAndValidity();
}

onSubmit() {
    this.submitted = true;
}

이것은 마술이 일어나는 곳입니다. 우선 제출된 부울을 추가합니다.
다음은 실제 변경 기능입니다. 여기에서 확인란의 현재 값을 확인합니다.
2이면 field_2를 필수로 만들고 field_1을 필수로 만들지 않으며 그 반대도 마찬가지입니다.

그리고 그게 다야. 이렇게 하면 특정 필드에 대한 유효성 검사기를 동적으로 변경할 수 있는 옵션이 제공됩니다.

GitHub에서 전체 코드를 다운로드할 수도 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나