Angular Reactive Forms의 valueChanges 메소드에 대한 조건부 유효성 검사

이 블로그 게시물에서는 Angular Reactive Forms 값 변경 감지를 사용하고 가장 완벽하고 가장 완벽한 Angular 구성 요소 라이브러리 인 Ignite UI의 도움을 받아 이를 기반으로 조건부 유효성 검사를 활성화하는 방법을 배웁니다.

​여기에서 첫 번째 Angular 반응형 양식을 만드는 방법을 알아보세요.

아래와 같이 FormBuilder 클래스를 사용하여 만든 반응형 양식이 있다고 가정해 보겠습니다.

ngOnInit() {
    this.loginForm = this.fb.group({
      email: [null, Validators.required],
      password: [null, [Validators.required, Validators.maxLength(8)]],
      phonenumber: [null]
    });

  }

이메일, 암호 및 전화 번호의 세 가지 컨트롤이 있는 loginForm을 만들었습니다. 여기서는 FormBuilder를 사용하여 반응형 양식을 만듭니다. 구성 요소 템플릿에서 아래 코드 목록에 표시된 대로 loginForm을 첨부할 수 있습니다. 속성 바인딩을 사용하면 HTML 양식 요소의 formGroup 속성이 loginForm으로 설정되고 이러한 컨트롤의 formControlName 값이 FormBuilder의 개별 FormControl 속성으로 설정됩니다.

<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
     <input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
     <div class="alert  alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
         Email is required
     </div>
     <input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
     <input formControlName='phonenumber' type="text" class="form-control" placeholder="Enter Phone Number" />
     <div class="alert  alert-danger" *ngIf="loginForm.get('phonenumber').hasError('required') && loginForm.get('phonenumber').touched">
         Phone Number is required
     </div>
     <br />
     <button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
 </form>

또한 이메일 및 전화 번호 필드에 오류 메시지를 넣었습니다. 게다가, 해당 제출 버튼은 양식이 유효한 경우에만 활성화됩니다.  양식 제출은 아래 목록과 같이 처리됩니다.

loginUser() {
    console.log(this.loginForm.status);
    console.log(this.loginForm.value);
}

양식이 브라우저 콘솔에서 유효하면 다음과 같은 출력을 얻을 수 있습니다.

또한 오류가 있는 경우 제출 버튼이 비활성화되고 아래와 같은 오류 메시지가 표시됩니다.

여기에서 Angular Reactive Forms에 대한 사용자 지정 유효성 검사기를 만드는 방법을 배울 수 있습니다.

이제 알림을 보낼 라디오 단추가 있는 시나리오를 가정합니다. 사용자는 알림 보내기 옵션을 선택할 수 있어야 하며, 이를 기반으로 특정 FormControl에 몇 가지 유효성 검사가 수행됩니다.

아래 양식을 고려하십시오.

알림 보내기 옵션을 추가했습니다. 사용자가 알림을 보내기 위해 전화를 선택하는 경우 전화 번호 필드가 필요해야 하며, 그렇지 않으면 필요하지 않습니다. 이를 위해서는 다음 작업을 수행해야 합니다.

1. 변화에 귀 기울이기
2. Put conditional validation

먼저 알림을 처리하도록 양식을 수정해 보겠습니다. 이제 form에는 아래 목록과 같이 기본값이 null로 설정된 알림 FormControl이 있습니다.

this.loginForm = this.fb.group({
    email: [null, Validators.required],
    password: [null, [Validators.required, Validators.maxLength(8)]],
    phonenumber: [null],
    notification: ['email']
});

반응형 양식 템플릿에서 알림 보내기 옵션을 처리하기 위해 라디오 버튼 그룹을 추가합니다.

<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
    <input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
    <div class="alert  alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
        Email is required
    </div>
    <input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
    <input formControlName='phonenumber' type="text" class="form-control" placeholder="Enter Phone Number" />
    <div class="alert  alert-danger" *ngIf="loginForm.get('phonenumber').hasError('required') && loginForm.get('phonenumber').touched">
        Phone Number is required
    </div>
    <br />
    <label class='control-label'>Send Notification</label>
    <br />
    <label class="radio-inline">
        <input type="radio" value="email" formControlName="notification">Email
    </label>
    <label class="radio-inline">
        <input type="radio" value="phone" formControlName="notification">Phone
    </label>
 
    <br />
    <button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
</form>

이 시점에서 양식은 다음과 같습니다.

valueChanges 구독하기

반응형 양식에서 FormControls와 FormGroups에는 valueChanges 메소드가 있습니다. 관찰 가능한 유형을 반환하므로 FormControls 또는 FormGroups의 실시간 값 변경 작업을 위해 구독할 수 있습니다.

이 예에서는 알림 FormControl의 valueChanges를 구독해야 합니다. 이것은 다음과 같이 수행 할 수 있습니다.

formControlValueChanged() {
    this.loginForm.get('notification').valueChanges.subscribe(
        (mode: string) => {
            console.log(mode);
        });
}

이것을 아래와 같이 OnInit 라이프사이클 훅이라고 불러야 합니다.

ngOnInit() {
    this.loginForm = this.fb.group({
        email: [null, Validators.required],
        password: [null, [Validators.required, Validators.maxLength(8)]],
        phonenumber: [null],
        notification: ['email']
    });

    this.formControlValueChanged();

}

이제 브라우저 콘솔의 양식에서 알림 선택을 변경하면 가장 최근의 값을 볼 수 있습니다.

최신 값을 얻기 위해 라디오 버튼의 이벤트를 처리하지 않습니다. Angular 에는 FormControl 및 FormGroup에서 관찰 가능한 최근 값을 반환하는 valueChanges 메서드가 있으며 알림 FormControl의 최근 값에 대해 구독되어 있습니다.

Conditional Validation

우리의 요구 사항은 알림이 전화로 설정된 경우 전화 번호 FormControl이 필수 필드여야 하고 이메일로 설정된 경우 전화 번호 FormControl에 유효성 검사가 없어야 한다는 것입니다.

다음 목록과 같이 formControlValueChnaged() 함수를 수정하여 전화번호 FormControl에 대한 조건부 유효성 검사를 활성화하겠습니다.

formControlValueChanged() {
    
    const phoneControl = this.loginForm.get('phonenumber');
    this.loginForm.get('notification').valueChanges.subscribe(
        (mode: string) => {
            console.log(mode);
            if (mode === 'phone') {
                phoneControl.setValidators([Validators.required]);
            }
            else if (mode === 'email') {
                phoneControl.clearValidators();
            }
            phoneControl.updateValueAndValidity();
        });

}

 

위에는 많은 코드가 있으므로 한 줄씩 이야기하십시오.

1. FormBuilder의 get 메소드를 사용하여 전화 번호 FormControl의 인스턴스를 가져옵니다.
2. 알림 FormControl에서 valueChanges 메소드 구독
3. 알림 FormControl의 현재 값 확인
4. 현재 값이 phone인 경우 FormControl의 setValidators 메소드를 사용하여 phonenumber 컨트롤에 필요한 유효성 검사기를 설정합니다.
5. 현재 값이 이메일인 경우 FormControl의 clearValidators 메소드를 사용하여 전화번호 컨트롤에 대한 모든 유효성 검사를 지웁니다.
6. 마지막으로 updateValueAndValidity 메서드를 호출하여 phonecontrol의 유효성 검사 규칙을 업데이트합니다.

응용 프로그램을 실행하면 알림 값을 변경하면 전화 번호의 유효성 검사가 변경되는 것을 볼 수 있습니다.

Reactive Form의 valueChanges 메소드 Angular 사용하면 조건부 유효성 검사 및 반응형 양식의 기본 데이터 모델 변경에 대응하는 것과 같은 기타 여러 기능을 얻을 수 있습니다.

이 게시물이 마음에 드시나요?

이 게시물이 마음에 들면 공유해주세요. 또한 아직 라이브러리를 확인하지 않으셨다면 꼭 확인하세요! 재료 기반 UI 구성 요소, 시장에서 가장 빠른 Angular 데이터 그리드 및 60+ 고성능 차트가 포함된 가장 완벽한 도구 상자입니다!