textareaChỉ thị AngularJS


Thí dụ

Một vùng văn bản có ràng buộc dữ liệu:

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

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

Định nghĩa và Cách sử dụng

AngularJS sửa đổi hành vi mặc định của <textarea>các phần tử, nhưng chỉ khi ng-modelthuộc tính có mặt.

Chúng cung cấp ràng buộc dữ liệu, có nghĩa là chúng là một phần của mô hình AngularJS và có thể được tham chiếu và cập nhật, cả trong các hàm AngularJS và trong DOM.

Họ cung cấp xác nhận. Ví dụ: một <textarea>phần tử có requiredthuộc tính, có $validtrạng thái được đặt falsemiễn là nó trống.

Họ cũng cung cấp sự kiểm soát của nhà nước. AngularJS giữ trạng thái hiện tại của tất cả các phần tử textarea.

Các trường Textarea có các trạng thái sau:

  • $untouched Lĩnh vực này vẫn chưa được chạm vào
  • $touched Lĩnh vực này đã được chạm vào
  • $pristine Trường vẫn chưa được sửa đổi
  • $dirty Trường đã được sửa đổi
  • $invalid Nội dung trường không hợp lệ
  • $valid Nội dung trường hợp lệ

Giá trị của mỗi trạng thái đại diện cho một giá trị Boolean và là một trong true hai false.


Cú pháp

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

Các phần tử Textarea đang được tham chiếu bằng cách sử dụng giá trị của ng-modelthuộc tính.



Các lớp CSS

<textarea>các phần tử bên trong ứng dụng AngularJS được cung cấp các lớp nhất định . Các lớp này có thể được sử dụng để tạo kiểu cho các phần tử textarea theo trạng thái của chúng.

Các lớp sau được thêm vào:

  • ng-untouched Lĩnh vực này vẫn chưa được chạm vào
  • ng-touched Lĩnh vực này đã được chạm vào
  • ng-pristine Trường vẫn chưa được sửa đổi
  • ng-dirty Trường đã được sửa đổi
  • ng-valid Nội dung trường hợp lệ
  • ng-invalid Nội dung trường không hợp lệ
  • ng-valid-keyMột khóa cho mỗi lần xác thực. Ví dụ:, ng-valid-requiredhữu ích khi có nhiều thứ phải được xác thực
  • ng-invalid-key Thí dụ: ng-invalid-required

Các lớp bị loại bỏ nếu giá trị mà chúng đại diện là false.

Thí dụ

Áp dụng kiểu cho các phần tử textarea hợp lệ và không hợp lệ, sử dụng CSS chuẩn:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>