Question

我有一个带有ngMessages的工作表单。

我的问题是，当显示表单然后清空时，我不想显示错误，只有当用户集中输入时才会显示错误。

这可能吗？

Answer 1

使用$touched：

段：

＆＃13;

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function($scope) {
  // Any JS Code
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://code.angularjs.org/1.5.7/angular.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form role="form" name="form" novalidate>
    <div class="col-md-12">
      <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }">
        <label>Name</label>
        <input type="email" name="email" class="form-control" placeholder="Name" ng-model="email" required>
        <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched">
          <p ng-message="required">This field is required</p>
          <p ng-message="minlength">This field is too short</p>
          <p ng-message="maxlength">This field is too long</p>
          <p ng-message="required">This field is required</p>
          <p ng-message="email">This needs to be a valid email</p>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

＆＃13;

有关详情here。

我希望它有所帮助！

AngularJS验证错误

1 个答案: