Angularjs using Ngmessages for form validation

This article reprinted (has not found the original author ... ）

The module with the name "Ngmessages" is installed via NPM install Angular-messages. Before we use ngmessages, we may write validation like this:

<form name= "UserForm" ><input type= "text" name= "username" ng-model= "user.username" ng-minlength= "3" Ng-maxlength= "8" required><p ng-show= "Userform.username. $error. MinLength" >username "is too short.</p> <p ng-show= "Userform.username. $error. MaxLength" >username is too long.</p><p ng-show= " Userform.username. $error. Required ">your username is required.</p></form>

Above, lists each possible validation failure, and manually writes whether to display the error message.

With the module "Ngmessages", it's roughly written like this:

<div class= "Help-block" ng-messages= "Userform.name. $error" ng-if= "Userform.name. $touched" ><p ng-message= " MinLength "> User name Minimum length 5</p><p ng-message=" MaxLength "> Username max length 10</p><p ng-message=" required " > User name Required </p></div>

Ngmessages for us to automatically determine which error to display.

Several key points for using ngmessages:

NPM Install Angular-messages
Reference: Angular-messages.js
Dependency: Angular.module (' app ', [' ngmessages '])

Here's a simple demo, file structure:

node_modules/
App.js
Emailmessages.html
Index.html

Install the following:

NPM Install bootstrap
NPM Install angular
NPM Install Angular-messages

==index.html

<! DOCTYPE html>
App.js
Angular.module (' app ', [' ngmessages ']). Controller (' Mainctrl ', Mainctrl); function Mainctrl () {}
Emailmessages.html
Put the form verification of the email here, through <div ng-messages-include= "emailmessages.html" ></div> display to a location on the page.
<p ng-message= "Required" > E-mail required </p><p ng-message= "minlength" > Mailbox length Too Short </p><p ng-message= " MaxLength "> Mailbox length too long </p><p ng-message=" email "> Invalid mailbox </p>
PS: Commonly used form validation directives
1. Mandatory fields Validation
If a form input is filled in, simply add the HTML5 tag to the input field element required:
The code is as follows:
<input type= "text" required/>
2. Minimum length
To verify that the text entered by the form is longer than a certain minimum value, use the directive ng-minleng= "{number}" on the input field:
The code is as follows:
<input type= "Text" ng-minlength= "5"/>
3. Maximum length
To verify that the text length entered by the form is less than or equal to a maximum value, use the directive ng-maxlength= "{number}" on the input field:
The code is as follows:
<input type= "text" ng-maxlength= "/>"
4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:
The code is as follows:
<input type= "text" ng-pattern= "/[a-za-z]/"/>
5. Email
Verify that the input is an e-mail message, as long as you set the type of input to email as follows:
The code is as follows:
<input type= "Email" name= "email" ng-model= "User.email"/>
6. Digital
Verify that the input is numeric and set the type of input to number:
The code is as follows:
<input type= "number" name= "Age" ng-model= "User.age"/>
7. URL
Verify that the input is a URL and set the type of input to a URL:
The code is as follows:
<input type= "url" name= "homepage" ng-model= "User.facebook_url"/>
Angularjs using Ngmessages for form validation