03 폼 유효성검사 04

제어 상태 CSS 클래스

AngularJS와 마찬가지로 Angular는 많은 컨트롤 프로퍼티를 CSS 클래스로 폼 컨트롤 엘리먼트에 자동으로 반영합니다. 이 클래스를 사용하여 폼의 상태에 따라 양식 컨트롤 엘리먼트를 장식할 수 있습니다. 현재 지원되는 클래스는 다음과 같습니다.

l  .ng-valid

l  .ng-invalid

l  .ng-pending

l  .ng-pristine

l  .ng-dirty

l  .ng-untouched

l  .ng-touched

영웅 폼은 .ng-valid 및 .ng-invalid 클래스를 사용하여 각 양식 컨트롤의 테두리 색을 설정합니다.

forms.css (status classes)

.ng-valid[required], .ng-valid.required  {   border-left: 5px solid #42A948; /* green */ }   .ng-invalid:not(form)  {   border-left: 5px solid #a94442; /* red */ }

실시간 예제 / 다운로드 예제를 실행하여 리액티브 및 템플릿 기반 예제 코드 전체를 볼 수 있습니다.