AngularJS텍스트 영역 지침

데이터 바인딩을 가진 텍스트 영역 :

<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> A의 요소 required 속성은이 $valid 로 설정 상태를 false 으로 그것이 비어로합니다.

또한 국가 통제를 제공한다. AngularJS와 모든 텍스트 영역 요소의 현재 상태를 유지한다.

텍스트 영역 필드는 다음과 같은 상태를 가지고 :

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

텍스트 영역은 요소의 값을 사용하여 언급되는 ng-model 특성.

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