AngularJS form 지시어

정의와 사용법

AngularJS 수정 <form> 요소의 기본 동작.

AngularJS 애플리케이션 내의 폼은 특정 속성을 가집니다. 이 속성들은 폼의 현재 상태를 설명합니다.

폼은 다음과 같은 상태를 가집니다：

• $pristine 아무 필드도 수정되지 않았습니다
• $dirty 한 개 이상의 필드가 수정되었습니다
• $invalid 양식 내용이 무효입니다
• $valid 양식 내용이 유효합니다
• $subscribed 폼이 제출되었습니다

각 상태의 값은 부울 값을 나타내며, true 또는 false。

action 속성이 지정되지 않으면, AngularJS의 폼은 기본 작업을 방지합니다. 즉, 서버에 폼을 제출합니다.

예제

예제 1

필요한 입력 필드가 비어 있으면, 이 폼의 '유효 상태'는 "true"로 간주되지 않습니다：

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>폼의 유효 상태는：</p>
<h1>{{myForm.$valid}}</h1>

직접 시도해 보세요

예제 2

스타일을 원본(기본) 폼과 수정된 폼에 적용합니다：

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

직접 시도해 보세요

문법

<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그렇다면 이러한 클래스가 제거됩니다。