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>
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments