hide default error message in AngularJs

Question

How to hide a default error message in AngularJs? I tried display:none; . But, it won't work. I'm new to AngularJS. I want to hide the default error message and I want to show the error message when user onfocus the input textbox.

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

Possible duplicate of stackoverflow.com/questions/25634394/… — hubatish
– hubatish, Commented Jul 26, 2017 at 17:25

gevorg · Accepted Answer · 2016-05-30 12:05:24Z

3

This is what you need, contact_form.first_name.$dirty is used to check if field was changed or not

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

edited May 30, 2016 at 12:05

answered May 15, 2016 at 21:09

gevorg

5,1155 gold badges40 silver badges54 bronze badges

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

2 Comments

Karuppiah RK Over a year ago

what is the use of contact_form.first_name.$dirty?

gevorg Over a year ago

It is used to check case if input was interacted or not docs.angularjs.org/guide/forms

Yosvel Quintero · Accepted Answer · 2016-05-15 22:33:44Z

In your controller you can create a variable to determine if the form have been sumbitted:

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

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

Than in your view:

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

Collectives™ on Stack Overflow

hide default error message in AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related