ngForm, ngModel을 이용한 유효성검사

폼에는 ngForm으로 바인딩하고 폼콘트롤에는 ngModel을 바인딩하면 디렉티브를 이용해서 유효성검사를 할 수 있다.

폼디렉티브는 폼콘트롤의 상태에따른 폼엘리먼트 CSS클래스를 자동으로 지정한다.

.ng-valid
.ng-invalid
.ng-pending
.ng-pristine
.ng-dirty
.ng-untouched
.ng-touched
.ng-submitted (폼 엘리먼트에만 적용)

CSS파일에 위 클래스를 설정하면 폼엘리먼트가 바인딩된 디렉티브의 상태에따라 자동으로 클래스가 적용된다.

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

폼엘리먼트에 바인딩된 디렉티브가 required유효성검사가 valid상태라면 위 클래스가 자동 적용된다.

<form #heroForm="ngForm">
<input type="text" name="name" [(ngModel)]="hero.name"
          #name="ngModel" required>
	<div *ngIf="name.errors?.['required']">
            name must be required
    </div>
</form>

위의 경우 form도 디렉트브가 바인딩어있고 폼콘트롤도 디렉티브 바인디오딩되어있다.

.ng-invalid  {
  border-left: 5px solid #a94442; /* red */
}

폼디렉비트가 invalid상태라면 해당 폼엘리먼트에 위 클래스가 자동적용된다.

그러나 name디렉티브가 invalid이면 heroForm도 자동으로 invalid상태가 된다. 따라서 name과 heroForm둘다 클래스가 적용된다.

heroForm은 적용하지 않고 name만 클래스가 적용되도록 해야 한다.

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

위와 같이 가상클래스를 사용해서 클래스 CSS를 설정해야 한다.