Angularjs - 如何获得ng消息所需的错误，以同时显示和禁用输入按钮

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> 

我相信这是因为无法显示该消息时，输入按钮被禁用，因为什么也没有提交？

我试过使用$禁用和$无效，而不是他们没有工作。

Answer 1

我删除了冲突的ng-if在ng-message元素上。这是一个显示固定代码的工作。

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

我的假设是，你忘了注入“ngMessages”模块作为外部的依赖。

您可以修复你的代码是这样的：

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