Hiding validation in AngularJS

Question

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.

Xavier · Accepted Answer · 2016-02-25 09:22:12Z

1

You shoud try:

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

answered Feb 25, 2016 at 9:22

Xavier

564 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pritam Narkhede · Accepted Answer · 2016-02-25 09:23:35Z

0

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>

answered Feb 25, 2016 at 9:23

Pritam Narkhede

1631 silver badge9 bronze badges

4 Comments

Aravind Over a year ago

Hi, Thanks for the response. Based on what condition will i use ng-show or hide ? because i can't check whether the user has touched the field or not. any idea how i can use $touched in condition ?

Pritam Narkhede Over a year ago

formname.fieldname.$touched OR !formname.fieldname.$pristine

Pritam Narkhede Over a year ago

And also as Alok said everything must be inside form tag

Aravind Over a year ago

Yes, I'm wrapping it inside a form tag. I will try your above suggestion, thanks

Alok · Accepted Answer · 2016-02-25 10:28:39Z

0

A few things you are doing wrong there.

It all needs to be inside a form tag with a name of contact.
You can use ng-show to show and hide your errors.
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.

edited Feb 25, 2016 at 10:28

answered Feb 25, 2016 at 9:23

Alok

1,3101 gold badge11 silver badges21 bronze badges

3 Comments

Aravind Over a year ago

Hi thanks for the response, i am wrapping the code inside the form tag, it's a huge form so i have pasted just the field and error message, should have been clear about that. Apologies. And i initially tried with ng-show, but only ng-message worked. And still ng-show is not working, any idea where i might be wrong ? Should i include something ?

Alok Over a year ago

Well. I will suggest you take bits of form out. There might be a typo or something. Oh ! And add "novalidate" attribute. Please also read the documentation at :docs.angularjs.org/guide/forms

Aravind Over a year ago

Thank you i used setDirty() from my js file and now my code is working fine, i removed my ng-if and all the validations are working on same ng-message now. Thank you for your response

Collectives™ on Stack Overflow

Hiding validation in AngularJS

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related