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

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

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

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

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