Question

我对同一个字段有两个验证，一个触摸，另一个触发更改下拉。它们都会同时显示，是否有可能在显示其他错误消息时隐藏错误消息？

<label> First name  *  </label>
    <input type="text" name="fname" ng-model="firstname" class="inversed" ng-minlength="2" ng-maxlength="50" ng-pattern="/^[a-zA-Z\s]*$/" maxlength="50" required />
<!-- Validation from drop down -->
<div class="hgtinpu errormessage serverside" ng-if="firstnameError">{{ firstnameError }}</div>
    <!--Inline validations -->

    <div ng-messages="contact.fname.$touched  && contact.fname.$error">
    <div class="hgtinpu errormessage clientside" ng-message="required">Please enter your first name</div>
    <div class="hgtinpu errormessage" ng-message="minlength">Should contain min 2 characters</div>
    <div class="hgtinpu errormessage" ng-message="maxlength">Should contain max 50 characters</div>
    <div class="hgtinpu errormessage" ng-message="pattern"> Should contain alphabets and space only</div>

    </div>

这是我的JS代码

if (!$scope.firstname) 
        {
      $scope.firstnameError = "Please enter your first name";
      // $scope.contact.fname.$touched =true;
      // $scope.contact.fname.$error=true;          
        //return;
        }
    else 
      {
      $scope.firstnameError = "";
      // $scope.contact.fname.$touched =false;
      // $scope.contact.fname.$error=false;       
      }

我尝试使用$ touching = true但它不起作用。

Answer 1

你应该试试：

<div class="hgtinpu errormessage serverside" ng-if="firstnameError && !contact.fname.$touched">{{ firstnameError }}</div>

Answer 2

您可以使用 ng-show 或 ng-hide 指令

<div class="hgtinpu errormessage" ng-show="contact.fname.$touched  && !contact.fname.$error">
    Message for Touched
</div>
<div class="hgtinpu errormessage" ng-show="contact.fname.$error && !contact.fname.$touched">
    Message Errors
</div>

Answer 3

你做错了一些事情。

这一切都需要在名称为contact的表单标记内。
您可以使用ng-show显示和隐藏错误。
所有错误都在表单模型上更新。

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
    $scope.DBArray = [{dbName:'rf',dbStatus:true},
                    {dbName:'rt',dbStatus:false}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl" class="container">
    <label> First name  *  </label>
    <form novalidate name="contact">
      <input type="text" name="fname" ng-model="firstname" class="inversed" ng-minlength="2" ng-maxlength="50" ng-pattern="/^[a-zA-Z\s]*$/" maxlength="50" required />
      <!-- Validation from drop down -->
      
      <div ng-messages="contact.fname.$touched  && contact.fname.$error">
        <div class="hgtinpu errormessage clientside" 
          ng-show="contact.fname.$dirty && contact.fname.$error.required" 
          ng-message="required">Please enter your first name</div>
        <div class="hgtinpu errormessage" 
          ng-show="contact.fname.$dirty && contact.fname.$error.minlength" 
          ng-message="minlength">Should contain min 2 characters</div>
        <div class="hgtinpu errormessage" 
          ng-show="contact.fname.$dirty && contact.fname.$error.maxlength" 
          ng-message="maxlength">Should contain max 50 characters</div>
        <div class="hgtinpu errormessage" 
            ng-show="contact.fname.$dirty && contact.fname.$error.pattern" 
            ng-message="pattern"> Should contain alphabets and space only</div>
      </div>
    </form>
    <br />
    <p>Contact form values:</p>
    <p> {{contact.fname}}</p>
  </body>

查看plunker。我还在显示表单对象，以便您可以看到正在改变的位置。表单创建一个带有name属性的模型，然后将所有值附加到它，包括错误。

在AngularJS中隐藏验证

3 个答案: