AngularJS `input`지시문

데이터 바인딩이 있는 입력 필드:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>

정의 및 사용

AngularJS는 속성이 있는 <input>경우에만 요소 의 기본 동작을 수정합니다.ng-model

데이터 바인딩을 제공합니다. 즉, AngularJS 모델의 일부이며 AngularJS 함수와 DOM 모두에서 참조 및 업데이트할 수 있습니다.

검증을 제공합니다. 예: 속성이 있는 <input>요소 는 비어 있는 한 상태를 로 설정합니다 .required$validfalse

그들은 또한 상태 제어를 제공합니다. AngularJS는 모든 입력 요소의 현재 상태를 유지합니다.

입력 필드의 상태는 다음과 같습니다.

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

ng-model속성 값을 사용하여 입력 요소를 참조하고 있습니다.

<input>AngularJS 애플리케이션 내부의 요소에는 특정 클래스 가 제공 됩니다. 이러한 클래스는 상태에 따라 입력 요소의 스타일을 지정하는 데 사용할 수 있습니다.

다음 클래스가 추가됩니다.

ng-untouched필드는 아직 건드리지 않았습니다
ng-touched필드가 터치되었습니다
ng-pristine필드는 아직 수정되지 않았습니다
ng-dirty필드가 수정되었습니다
ng-valid필드 내용이 유효합니다
ng-invalid필드 내용이 유효하지 않습니다
ng-valid-key각 유효성 검사에 대해 하나 의 키 입니다. 예: ng-valid-required, 유효성을 검사해야 하는 항목이 둘 이상 있을 때 유용합니다.
ng-invalid-key예시:ng-invalid-required

클래스가 나타내는 값이 이면 클래스가 제거됩니다 false.

표준 CSS를 사용하여 유효한 입력 요소와 잘못된 입력 요소에 스타일을 적용합니다.

<style>

input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}

</style>