Xác thực nhập văn bản AngularJS với bộ đếm

Question

Tôi đang phát triển một ứng dụng có chứa biểu mẫu có đầu vào văn bản với ng-model="description". Bây giờ tôi muốn xác thực tính năng nhập văn bản này bằng cách sử dụng ng-maxlength="50" và required. Điều này hoạt động tốt, nhưng tôi cũng muốn thêm một bộ đếm ký tự (như 67/50) được hiển thị mọi lúc. Tôi đang sử dụng đoạn mã sau để hiển thị các cập: {{description.length || 0}}/50

Vấn đề với điều này, tuy nhiên, đó là description.length không trả lại một giá trị khi nó lớn hơn 50, vì description đầu vào không hợp lệ. Trong kịch bản của tôi, bộ đếm sẽ mặc định là 0/50 khi không có đầu vào (và điều đó tốt) nhưng cũng khi đầu vào vượt quá độ dài tối đa.

Tôi cũng muốn hiển thị bộ đếm màu đỏ khi độ dài đầu vào không hợp lệ, nhưng điều đó không quá khó khi sử dụng các lớp css xác thực góc.

Tất nhiên tôi có thể cung cấp xác thực tùy chỉnh, nhưng tôi tích cực có giải pháp dễ dàng hơn.

Answer 1

Sử dụng các yếu tố hình thức $ viewValue thay vì như thế này:

<form name='form'> 

    <input type="text" name='description' ng-model='description' ng-maxlength="50"> 
    {{form.description.$viewValue.length || 0}}/50 
</form> 

Xem this plunker