Угловое ngMessage: Validate on form submit

Question

в этом plunk есть форма с проверками ngMessage. Это то, что я пытаюсь достичь:

• Когда форма показана пользователю, никаких сообщений об ошибках не должны отображаться
• На размытости, если поле имеет ошибки, то сообщение должно быть показано
• Когда форма отправлена, если есть какие-либо поля с ошибками, сообщения об ошибках должны отображаться.

В plunk У меня есть две проблемы: (1) сообщение отображается, когда форма изначально показана, и (2) когда сообщения об ошибках и пользователь не нажимает на кнопку, форма не отправляется. Что не так с кодом?

HTML

<form name="myForm" novalidate> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 

    <div ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 

    <button type="submit" 
    ng-submit="myForm.$valid && submitForm()">Submit</button> 
</form> 

Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']); 
app.controller('nameController', function ($scope) { 

    $scope.submitForm = function() { 
    alert('Form submitted - fields passed validation'); 

    };  
}); 

Answer 1

Вам нужно отображать сообщения проверки с использованием условия, как, например, нг-если

HTML:

<div ng-if="submitted || myForm.myName.$dirty" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

Javascript:

$scope.submitForm = function() { 
    $scope.submitted = true; 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

и движение нг подать от кнопки сформировать тег как:

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 2

Основываясь на anwser KWARC, то и здесь немного улучшается, так как вы можете избежать использования переменной $scope, чтобы узнать, отправлена ​​ли ваша форма. Это также обеспечивает лучшее поведение при отображении сообщений об ошибках.

HTML:

<div ng-if="myForm.myName.$invalid && (myForm.$submitted || myForm.myName.$touched)" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

Javascript:

$scope.submitForm = function() { 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

myForm.$submitted будет автоматически установлен истинный

и, наконец, применить ту же форму, представить метод по форме тега:

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 3

Для меня это было достаточно просто использовать в нг-если $ представлены состояние вида (пример скелетный):

// and in the submit btn 
 

 
scope.submit = function() { 
 
    scope.myForm.$setSubmitted(); 
 
    if (scope.myForm.$valid) { 
 
    // do something 
 
    } 
 
}

<div ng-if="myForm.$submitted || myForm.attr.$touched" ng-messages="myForm.attr.error"> 
 
    <!-- messages with ngMessages --> 
 
</div>