AngularJS表单：提交时显示验证错误？答案

【问题标题】：AngularJS forms: display validation errors on submit?AngularJS表单：提交时显示验证错误？
【发布时间】：2017-03-17 20:04:56
【问题描述】：

我正在使用 Angular JS 1.5.11。

我的字段上有一个包含错误消息和样式的表单。我找到了有关如何触发模糊、去抖动等验证的信息。

但我也希望在提交表单时检查这些字段。我找到了有关如何判断表单在提交时是否有效然后处理表单的信息——而不是如何在用户提交时激活字段错误消息。

澄清一下：我的字段上有错误消息。当用户提交时，如果字段有错误，我希望出现错误消息（并且用户必须修复错误并重新提交）。

我有这样的事情：

 <form name="abc.myForm" class="spacer-top-md" ng-submit="abc.save(abc.user)" novalidate>

 <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-model-options="{ updateOn: 'blur'}" required>
  <p ng-show="myForm.name.$invalid && !myForm.name.$pristine" class="help-block">Enter your name.</p>
</div>

<input type="submit" class="btn btn-primary">

在我的控制器中：

  _this.master = {};

  _this.save = function (user) {
    _this.master = angular.copy(user);
  };

  _this.reset = function () {
    _this.user = angular.copy(_this.master);
  };

  _this.reset();

提交工作，数据从user 对象复制到master 对象。但如果有空字段，则没有错误。到目前为止，触发错误的唯一方法是在字段中输入数据并跳出。

【问题讨论】：

ng-required="true" 可能需要更新

标签： javascript angularjs forms validation

【解决方案1】：

你可以使用

   myForm.$submitted && myForm.email.$error.required

或者，或者：

 <form name="form" ng-app>
 <div class="control-group" ng-class="{true: 'error'}[submitted &&      form.email.$invalid]">
    <label class="control-label" for="email">Your email address</label>
    <div class="controls">
        <input type="email" name="email" ng-model="email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
</div>

<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>

【讨论】：

请注意，由于我使用的是“controller as”格式，您的第一个提示需要是abc.myForm.$submitted && abc.myForm.name.$error.required

【解决方案2】：

您应该在您的应用中包含 ng-messages 指令，

这里是 sn-p 你应该添加到你的 html 中，以使用 ng-messages 指令。

输入元素中的'required'属性将被指令和触发消息监视。

不要忘记在模块中进行依赖注入。

<div ng-messages="abc.myForm.name.$error" ng-show="abc.myForm.name.$touched">
                <p ng-message="required">This field is required.</p>
            </div>

【讨论】：