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

OR，或者：

 <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指令，

这里是你应该添加到你的html的片段，使用ng-messages指令。

输入元素中的

'required'属性将由指令和triger消息监视。

不要忘记模块中的依赖注入。

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

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

2 个答案: