Angularjs - 如何获得 ng-message required 错误以同时显示和禁用输入按钮

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-message 元素上的冲突 ng-if。这是一个显示固定代码的工作 plunk。

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

我的假设是您忘记将“ngMessages”模块作为外部依赖注入(inject)。

您可以像这样修复您的代码:

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