Angularjs - jak uzyskać komunikat o błędzie wymagającym ng do wyświetlania i wyłączania przycisku wprowadzania w tym samym czasie

Question

Chcę, aby komunikat o błędzie pojawił się, gdy użytkownik kliknie przycisk Wyślij bez zawartości i chcę, aby przycisk przesyłania był wyłączony. Mogę uzyskać jeden działający, ale nie oba jednocześnie.

Poniższy kod wyświetla komunikat, ale pozwala na pusty element todo.

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

Ta wersja wyłącza przycisk Prześlij, ale nie spowoduje wyświetlenie komunikatu

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

Przypuszczam, to dlatego, że nie może być wyświetlany komunikat po naciśnięciu przycisku wejście jest wyłączone, ponieważ nic nie zostało przesłane?

Próbowałem używać zamiast tego $ disabled i $ invalid, ale nie zadziałały.

Answer 1

Usunąłem sprzeczne ng-if na elemencie wiadomości ng. Oto działający plunk pokazujący poprawiony kod.

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

Moje założenie jest, że zapomnieli wstrzyknąć moduł „ngMessages” jako zewnętrznego uzależnienia.

można naprawić swój kod tak:

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