03 폼 유효성검사 01

폼 유효성검사

정확성과 완전성을 위해 사용자 입력을 검증하여 전반적인 데이터 품질을 향상시킵니다.

이 페이지는 UI에서 사용자 입력의 유효성을 검사하고 반응형 및 템플릿기반 폼을 사용하여 유용한 유효성검사 메시지를 표시하는 방법을 보여줍니다. 두 가지 폼모듈에 대한 몇 가지 기본지식이 필요합니다.

폼을 처음 사용하는 경우 폼 가이드 및 반응 폼 가이드를 리뷰하십시오.

 

템플릿 기반 유효성검사

템플릿 기반 폼에 유효성검사를 추가하려면 네이티브 HTML 폼 유효성검사에서와 동일한 유효성검사 어트리뷰트를 추가해야 합니다. Angular는 이러한 어트리뷰트를 프레임워크의 유효성검사 기능과 일치시키는 디렉티브를 사용합니다.

폼 컨트롤의 값이 변경 될 때마다 Angular는 유효성 검사를 실행하고 유효성 검사 오류 목록을 생성하여 INVALID 상태 또는 VALID 상태가되는 null을 생성합니다.

그런 다음 ngModel을 로컬 템플릿변수로 익스포트하여 컨트롤의 상태를 검사할 수 있습니다. 다음 예제에서는 NgModel을 name이라는 변수로 익스포트합니다.

template/hero-form-template.component.html (name)

<input id="name" name="name" class="form-control"        required minlength="4" forbiddenName="bob"        [(ngModel)]="hero.name" #name="ngModel" >   <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  <input> 엘리먼트는 HTML 유효성검사 어트리뷰트인 required 및 minlength를 전달합니다. 또한 사용자 정의 유효성검사 디렉티브인 forbiddenName을 전달합니다. 자세한 내용은 사용자 정의 유효성검사 섹션을 참조하십시오.

l  #name = "ngModel"은 NgModel을 로컬변수 name으로 익스포트합니다. NgModel은 기본 FormControl 인스턴스의 많은 프로퍼티를 미러링하므로 템플릿에서 이 프로퍼티를 사용하여 valid 및 dirty와 같은 컨트롤 상태를 확인할 수 있습니다. 컨트롤 프로퍼티의 전체 목록은 AbstractControl API 레퍼런스를 참조하십시오.

l  <div> 요소의 *ngIf는 name이 유효하지 않고 컨트롤이 dirty이거나 touched인 경우에만 중첩 된 메시지 div 집합을 표출합니다.

l  모든 중첩된 <div>는 가능한 유효성검증 오류중 하나에 대한 사용자 정의 메시지를 표시 할 수 있습니다. required, minlength 및 forbiddenName에 대한 메시지가 있습니다.

 

왜 dirty와 touched를 체크하는가? 사용자가 폼을 편집하기 전에 응용프로그램에서 오류를 표시하지 않도록 할 수 있습니다. dirty와 touched체크는 사용자가 다음 두 가지 중 하나를 수행할 때까지 오류가 표시되지 않도록합니다: 값을 변경하고 컨트롤을 dirty로 설정하거나, 컨트롤을 touched로 설정하고 폼 컨트롤 엘리먼트를 빠져나가는 경우