AngularJS `textarea`지시문

데이터 바인딩이 있는 텍스트 영역:

<textarea ng-model="myTextarea"></textarea>

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>

정의 및 사용

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

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

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

그들은 또한 상태 제어를 제공합니다. AngularJS는 모든 텍스트 영역 요소의 현재 상태를 유지합니다.

텍스트 영역 필드의 상태는 다음과 같습니다.

각 상태의 값은 부울 값을 나타내며 다음 중 하나 true 입니다 false.

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

<textarea>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>

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

</style>