앵귤러/04 폼(Forms)
03 폼 유효성검사 04
linor
2017. 9. 24. 17:42
제어 상태 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 */ } |