Angularjs - как получить сообщение об ошибке ng-message для одновременного отображения и отключения кнопки ввода

Question

Я хочу, чтобы сообщение об ошибке появлялось, если пользователь нажимает кнопку отправки без содержимого, и я хочу, чтобы кнопка отправки была отключена. Я могу получить либо один рабочий, но не оба одновременно.

Приведенный ниже код вызывает сообщение, но позволяет использовать пустой предмет.

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

Эта версия отключает кнопку отправки, но не выводит сообщение

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

Я полагаю, это потому, что сообщение не может быть отображено, когда кнопка входа отключена, потому что ничего не было Отправлено?

Я попытался использовать $ disabled и $ invalid, но они не сработали.

Answer 1

Я удалил конфликтующий ng-if на элементе ng-message. Вот рабочий стол, показывающий фиксированный код.

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

Мое предположение, что вы забыли внедрить модуль «ngMessages» в качестве внешней зависимости.

Вы можете исправить свой код, как это:

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