AngularJS `form`지시문

이 양식의 "유효한 상태"는 필수 입력 필드가 비어 있는 한 "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 애플리케이션 내부의 양식에는 특정 속성이 부여됩니다. 이러한 속성은 양식의 현재 상태를 설명합니다.

양식의 상태는 다음과 같습니다.

각 상태의 값은 부울 값을 나타내며 true 또는 false입니다.

AngularJS의 Forms는 action 속성이 지정되지 않은 경우 서버에 양식을 제출하는 기본 작업을 방지합니다.

이름 속성 값을 사용하여 양식을 참조하고 있습니다.

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>