CODEWITHSUNDEEP
javascriptangularjsvalidation
Aravind
Aravind

Reputation: 471

Hiding validation in AngularJS

I have two validations for the same field, one is touched and another is triggered on change of a drop down. Both of them get displayed at the same time, is there any possibility to hide a error message when the other error message is displayed ? 

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

This is my JS code

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;       
      }

I tried using $touched = true but it isn't working.

Upvotes: 1

Views: 1221

Answers (3)

Alok
Alok

Reputation: 1310

A few things you are doing wrong there.

  1. It all needs to be inside a form tag with a name of contact.
  2. You can use ng-show to show and hide your errors.
  3. All the errors are updated on the form model.

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>

Have a look at the plunker. I am also displaying the form object so that you can see what is changing where. The form creates a model with its name attribute and then appends all the values to it, including errors.

Upvotes: 0

Pritam Narkhede
Pritam Narkhede

Reputation: 163

You can use ng-show or ng-hide directive for that

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

Upvotes: 0

Xavier
Xavier

Reputation: 56

You shoud try:

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

Upvotes: 1

Related Questions