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

Question

我正在使用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对象。 但是，如果有空字段，则没有错误。 到目前为止，触发错误的唯一方法是在字段中输入数据并跳出。

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

Answer 2

您应将ng-messages指令添加到您的应用中，

这是要使用ng-messages指令添加到html中的代码段。

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

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

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