Angularjs - cách nhận thông báo lỗi ng-message cần hiển thị và vô hiệu hóa nút nhập cùng một lúc

Question

Tôi muốn thông báo lỗi xuất hiện nếu người dùng nhấp gửi không có nội dung và tôi muốn nút gửi bị tắt. Tôi có thể nhận được một trong hai làm việc, nhưng không phải cả hai cùng một lúc.

Mã bên dưới sẽ hiển thị thông báo nhưng cho phép mục cần làm trống.

<form name="todoForm" novalidate > 


    <div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered--> 

    <input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/> 

    <button input type="submit" ng-click="addTodo()" >Add To List</button><!--disables form if form not valid--> 

</form> 

Phiên bản này sẽ vô hiệu hóa nút gửi nhưng không đưa lên thông điệp

<form name="todoForm" novalidate > 


    <div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered--> 

    <input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/> 

    <button input type="submit" ng-click="addTodo()" data-ng-disabled="todoForm.$invalid" >Add To List</button> 
</form> 

Tôi đoán này là bởi vì các tin nhắn không thể được hiển thị khi nút đầu vào bị vô hiệu hóa vì không có gì đã được đã gửi?

Tôi đã thử sử dụng $ bị vô hiệu hóa và $ không hợp lệ thay thế nhưng chúng chưa hoạt động.

Answer 1

Tôi đã loại bỏ xung đột ng-if trên phần tử thông điệp ng. Đây là một plunk làm việc hiển thị mã cố định.

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

giả định của tôi là bạn quên tiêm module 'ngMessages' như một sự phụ thuộc bên ngoài.

Bạn có thể sửa mã của bạn như thế này:

var app = angular.module('plunker', ['ngMessages']);