CODEWITHSUNDEEP
htmlangularjs
MNK
MNK

Reputation: 131

How to Display more than two ng-show messages

I am trying to display more than two validation messages using ng-show property it is displaying two messages at the same while entering the input in the text field

<input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$dirty">Please enter the Contact Person</span>
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$dirty &&  profileform.Contact_Person.$error.pattern ">Contact Person accepts only characters</span>

Upvotes: 1

Views: 64

Answers (4)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27202

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="profileform">
<input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$error.required">Please enter the Contact Person</span>
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$error.pattern">Contact Person accepts only characters</span>
  </form>
</div>

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

you can use ng-message directive

<div ng-class="{ 'has-error': profileform.Contact_Person.$touched && profileform.Contact_Person.$invalid }">
    <input type="text" class="form-control" name="Contact_Person" ng-model="Facility.Contact_Person" ng-maxlength="35" ng-required="true" />
    <div ng-if="profileform.Contact_Person.$touched && profileform.Contact_Person.$invalid" ng-messages="profileform.Contact_Person.$error" class="error">
        <span ng-message="required">Please enter Contact Person Name.</span>
        <span ng-message="pattren">Contact Person accepts only characters.</span>
    </div>
</div>

Upvotes: 0

Pengyy
Pengyy

Reputation: 38171

you can use $error.required and $error.pattern to separate the showing error messages based on the type of valid errors.

Note that either of them fails will lead $invalid failing.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="profileform">
    <input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
    <span class="error" ng-show="profileform.Contact_Person.$error.required && profileform.Contact_Person.$dirty">Please enter the Contact Person</span>
    <span class="error" ng-show="profileform.Contact_Person.$error.pattern && profileform.Contact_Person.$dirty &&  profileform.Contact_Person.$error.pattern ">Contact Person accepts only characters</span>
  </form>
</div>

Upvotes: 3

Wintergreen
Wintergreen

Reputation: 234

change your code like this.

<span class="error" ng-show="!profileform.Contact_Person.$dirty">Please enter 
the Contact Person</span>

<span class="error" ng-show="profileform.Contact_Person.$invalid  && 
 profileform.Contact_Person.$error.pattern">Contact Person accepts only 
 characters</span>

Upvotes: 0

Related Questions