[ angularJS ] form validation with ngMessage

<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-if="myForm.input.$dirty" ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>

If we would like to use bootstrap’s `.has-error .help-block` text-danger CSS.

&lt;div class="form-group" ng-class="{'has-error': socialNavInnerForm.url.$invalid &amp;&amp; socialNavInnerForm.url.$dirty}")"&gt;
<form name="whateverForm" novalidate>
 <input class="form-control" name="whateverField" type="url" placeholder="Enter your whateverField" ng-model="whateverCtrl.whatever.whateverField" required autofocus)
 <div ng-if="whateverForm['whateverField'].$dirty" ng-messages="whateverForm['whateverField'].$error">
   <span class="help-block text-danger" ng-message="url">This doesn't appear to be a valid link. Don't forget to include 'https://' or 'http://' at the beginning of the link.</span>
 </div>
</form>
&lt;/div&gt;

DIY : https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s