AngularJS textarea 지시어

정의와 사용법

AngularJS가 수정 <textarea> 요소의 기본 동작을 유지하되 ng-model 속성이 존재합니다.

그들은 데이터 바인딩을 제공하며 이는 AngularJS 모델의 일부이므로 AngularJS 함수와 DOM에서 참조하고 업데이트할 수 있습니다.

그들은 검증을 제공합니다. 예를 들어： required 속성 <textarea> 요소가 비어 있으면 그 $valid 상태는 설정됩니다 false。

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

텍스트 영역 필드에는 다음과 같은 상태가 있습니다：

각 상태 값은 참 또는 거짓의 부울 값을 대표합니다.

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

<textarea ng-model="myTextarea"></textarea>
<p>텍스트 영역 필드의 값은：</p>
<h1>{{myTextarea}}</h1>

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

사용하여 ng-model 속성 값으로 텍스트 영역 요소를 참조할 수 있습니다.

AngularJS 애플리케이션 내의 <textarea> 요소는 특정 클래스를 가지고 있습니다. 이 클래스는 텍스트 영역 요소의 상태에 따라 스타일을 설정할 수 있습니다.

다음 클래스가 추가되었습니다：

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>