在 AngularJs 中隐藏默认错误消息

Question

如何在 AngularJs 中隐藏默认错误消息？我试过 display:none; 。但是，这是行不通的。我是 AngularJS 的新手。我想隐藏默认错误消息，我想在用户聚焦输入文本框时显示错误消息。

<p>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
    <span class="error" ng-messages="contact_form.first_name.$error">
        <span ng-message="required">First name should not be empty</span>
        <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
    </span>
</p>

Answer 1

这是你需要的，contact_form.first_name.$dirty用于检查字段是否被更改

<form name="contact_form" novalidate>    
  <p>
      <label for="first_name">First Name</label>
      <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
      <span class="error" ng-messages="contact_form.first_name.$error">
          <span ng-message="required" ng-show="contact_form.first_name.$error.required && contact_form.first_name.$dirty">First name should not be empty</span>
          <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
      </span>
  </p>
</form>

Answer 2

在您的控制器中，您可以创建一个变量来确定表单是否已提交：

app.controller('NameController', ['$scope', function($scope) {
    $scope.submitted = false;

    $scope.formProcess = function(form) {
    $scope.submitted = true;
        // logic
    }
}]);

你认为比：

<form ng-submit="formProcess(form)">
    <p>
        <label for="first_name">First Name</label>
        <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
        <span class="error" ng-if="submitted" && ng-messages="contact_form.first_name.$error">
            <span ng-message="required">First name should not be empty</span>
            <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
        </span>
    </p>
    <p>
        <button class="btn btn-secondary" type="submit">Send</button>
    </p>
</form>

在 AngularJs 中隐藏默认错误消息

hide default error message in AngularJs

javascript

css

jquery

hide

angularjs