Angular 선택적 양식 제어 유효성 검사

새로운 발견
대신 ngModel을 사용하십시오!

Angular NgModel 검증

존 피터스 ・ 2020년 9월 24일 ・ 1분 읽기

#angular #ngmodel #validation

웹 양식에 선택적 필드가 있다고 가정합니다. 이 필드는 필수는 아니지만 양식을 제출하기 전에 채워질 때 유효해야 합니다.

유효한 양식에 저장 버튼 가시성을 연결하는 방법에 대해 논의했습니다. 이것은 모든 것이 잘 되기 전에 아무것도 제출되지 않도록 하는 좋은 방법입니다. 해당 코드를 그대로 둘 수 있습니다.

필수가 아닌 필드에 대한 선택적 유효성 검사 기술은 다음과 같습니다.

// Create a formcontrol with no validators at first
 middleName: new FormControl(fcPerson.value.middleName)

그런 다음 해당 양식 컨트롤에 대한 changeEvent 수신기를 연결합니다.

// hook up changes listener.
 this.formGroup.controls
   .middleName.valueChanges
     .subscribe((change) => { 
        //inject validators here
      });

변경 시 주입할 유효성 검사기 패턴:

// the form control name is middleName
 middleName.setValidators([
   Validators.pattern(
     //the regex pattern
     middleNamePattern
   )
]);

좋은 시작.

JWP2020 선택적 양식 검증