Angular ngMessage：验证表单提交答案

【问题标题】：Angular ngMessage: Validate on form submitAngular ngMessage：验证表单提交
【发布时间】：2017-03-28 17:45:10
【问题描述】：

在这个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');

  };      
});

【问题讨论】：

标签： angularjs

【解决方案1】：

您需要使用条件显示验证消息，例如ng-if

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');
    }
};

并将 ng-submit 从按钮移动到表单标记，例如：

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

【讨论】：

如果我只在 $touched 的情况下进行验证，这项工作是否有效

【解决方案2】：

基于 Kwarc 的 anwser，这里有一点改进，因为您可以避免使用 $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 将自动设置为 true

最后，在表单标签上应用相同的表单提交方法：

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

【讨论】：

【解决方案3】：

对我来说，在 ng-if 表单的 $submitted 状态中使用就足够了（例如是准系统）：

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

【讨论】：