Angularjs - wie NG-Nachricht erforderlich Fehler zu Anzeige und Deaktivieren der Eingabe Schaltfläche zur gleichen Zeit

Question

Ich möchte eine Fehlermeldung angezeigt werden, wenn der Benutzer auf Senden ohne Inhalt, und ich möchte die Übermittlungsschaltfläche deaktiviert werden. Ich kann entweder einen arbeiten, aber nicht beide gleichzeitig.

Der folgende Code zeigt die Nachricht an, erlaubt aber einen leeren Todo-Eintrag.

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

Diese Version deaktiviert die Absenden-Button, sondern bringt die Nachricht nicht

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

Ich nehme an, dies liegt daran, dass die Nachricht nicht angezeigt werden kann, wenn die Eingabe-Taste deaktiviert ist, weil nichts gewesen eingereicht?

Ich habe versucht mit $ deaktiviert und $ ungültig stattdessen, aber sie haben nicht funktioniert.

Answer 1

Ich entfernte den Konflikt ng-if auf dem Element ng-message. Hier ist ein funktionierender Plunk, der den festen Code zeigt.

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

Meine Vermutung ist, dass Sie die ‚ngMessages‘ Modul als externe Abhängigkeit zu injizieren vergessen.

Sie können Ihren Code wie folgt beheben:

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