예
이 양식의 "유효한 상태는"한 필수 입력 필드가 비어로, "true"로 간주되지 않습니다 :
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
»그것을 자신을 시도 정의 및 사용
AngularJS와는의 기본 동작 수정 <form> 요소를.
AngularJS와 응용 프로그램 내부 형태는 특정 속성이 제공됩니다. 이러한 속성은 폼의 현재 상태를 설명합니다.
양식은 다음과 같은 상태를 가지고 :
-
$pristine없음 필드는 아직 수정되지 않았다 -
$dirty하나 이상의 수정 된 -
$invalid양식의 내용이 유효하지 않습니다 -
$valid양식의 내용이 유효 -
$submitted양식 제출
각 상태의 값은 부울 값을 나타내고, 중 하나입니다 true 또는 false .
작업 속성이 지정되지 않은 경우 AngularJS와의 양식은 서버에 양식을 제출하는 기본 동작을 방지 할 수 있습니다.
통사론
<form name=" formname "></form>형태의 name 속성의 값을 이용하여 언급되고있다.
CSS 클래스
AngularJS와 응용 프로그램 내부 형태는 특정 클래스가 제공됩니다. 이러한 클래스는 그 상태에 따라 스타일을 형성 할 수있다.
다음 클래스가 추가됩니다
-
ng-pristine어떤 필드는 아직 수정되지 않았다 -
ng-dirty하나 이상의 필드가 수정되었는지 -
ng-valid형태의 콘텐츠는 유효 -
ng-invalid양식의 내용이 유효하지 않습니다 -
ng-valid- key각각의 검증을위한 하나의 키를. 예 :ng-valid-required유용한 하나 이상의 일이있을 때 확인해야하는 -
ng-invalid- key예 :ng-invalid-required
이 나타내는 값이면 클래스는 제거 false .
예
수정되지 않은 (원시) 양식, 수정 된 형태의 스타일을 적용합니다 :
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
»그것을 자신을 시도