03 폼 유효성검사 02

반응형 폼 유효성검사

반응형 폼에서, 진실의 근원은 컴포넌트 클래스입니다. 템플릿의 어트리뷰트를 통해 유효성검사를 추가하는 대신 유효성검사 함수를 컴포넌트 클래스의 폼 컨트롤 모델에 직접 추가합니다. 그런 다음 Angular는 컨트롤의 값이 변경될 때마다 이 함수를 호출합니다.

 

유효성검사 함수

유효성검사 함수는 동기 유효성검사기와 비동기 유효성검사기 두 가지 유형이 있습니다.

l  동기 유효성검사기: 컨트롤 인스턴스를 사용하고 즉시 유효성검사 오류집합 또는 null 중 하나를 리턴하는 함수. FormControl을 인스턴스화할 때 두 번째 인수로 이를 전달할 수 있습니다.

l  비동기 유효성 검사기: 컨트롤 인스턴스를 사용하고 나중에 유효성검사 오류 또는 null 집합을 던지는 Promise 또는 Observable을 리턴하는 함수입니다. FormControl을 인스턴스화할 때 세 번째 인수로 이를 전달할 수 있습니다.

참고 : 성능상의 이유로 Angular는 모든 동기 유효성검사기가 통과하면 비동기 유효성검사기를 실행합니다. 오류가 설정되기 전에 각각 완료되어야 합니다.

 

내장 유효성검사기

자체 유효성검사 함수를 작성하거나 Angular에 내장 유효성검사기를 사용할 수 있습니다.

required 및 minlength와 같은 템플릿기반 폼의 어트리뷰트로 사용할 수 있는 동일한 내장 유효성검사기를 모두 Validators 클래스의 함수로 사용할 수 있습니다. 내장 유효성검사기의 전체 목록을 보려면 Validators API 참조를 참조하십시오.

영웅 폼을 반응형 폼으로 수정하려면 동일한 내장 유효성검사기를 함수 형식으로 사용할 수 있습니다. 아래를 참조하십시오:

reactive/hero-form-reactive.component.ts (validator functions)

ngOnInit(): void {   this.heroForm = new FormGroup({     'name': new FormControl(this.hero.name, [       Validators.required,       Validators.minLength(4),       forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.     ]),     'alterEgo': new FormControl(this.hero.alterEgo),     'power': new FormControl(this.hero.power, Validators.required)   }); }   get name() { return this.heroForm.get('name'); }   get power() { return this.heroForm.get('power'); }

참고 사항 :

 

l  name 컨트롤은 Validators.required와 Validators.minLength(4)라는 두 가지 내장 유효성검사기와 하나의 사용자정의 유효성검사기 forbiddenNameValidator를 설정합니다. 자세한 내용은 이 가이드의 사용자정의 유효성검사기 섹션을 참조하십시오.

l  이 유효성검사기는 모두 동기 유효성검사기이므로 두 번째 인수로 전달합니다.

l  함수를 배열로 전달하여 여러 유효성검사기를 지원합니다.

l  이 예제는 몇 가지 getter 메서드를 추가합니다. 반응형 폼에서는 항상 부모그룹의 get메소드를 통해 모든 폼 컨트롤에 액세스할 수 있지만 때로는 getter를 템플릿의 축약으로 정의하는 것이 유용합니다.

name 입력을 위한 템플릿을 다시 보면 템플릿기반 예제와 매우 유사합니다.

reactive/hero-form-reactive.component.html (name with error msg)

<input id="name" class="form-control"        formControlName="name" required >   <div *ngIf="name.invalid && (name.dirty || name.touched)"      class="alert alert-danger">     <div *ngIf="name.errors.required">     Name is required.   </div>   <div *ngIf="name.errors.minlength">     Name must be at least 4 characters long.   </div>   <div *ngIf="name.errors.forbiddenName">     Name cannot be Bob.   </div> </div>

주요 테이크 아웃 :

l  이 폼은 더 이상 디렉티브를 내보내지 않고 대신 컴포넌트 클래스에 정의된 name getter를 사용합니다.

l  required 어트리뷰트는 계속 존재합니다. 유효성검사의 목적으로는 필요하지 않지만 CSS 스타일 또는 접근성의 이유로 템플릿에 보관할 수 있습니다.