Home > Developer > Web Develop
The module with the name "Ngmessages" is installed via NPM install Angular-messages. Before we use ngmessages, we may write validation like this:
<formname= "UserForm"> <inputtype= "text"name= "username"Ng-model= "User.username"Ng-minlength= "3"Ng-maxlength= "8"Required> <PNg-show= "Userform.username. $error. MinLength">Username is too short.</P> <PNg-show= "Userform.username. $error. MaxLength">Username is too long.</P> <PNg-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:
<Divclass= "Help-block"ng-messages= "Userform.name. $error"ng-if= "Userform.name. $touched"> <PNg-message= "MinLength">User name Minimum Length 5</P> <PNg-message= "MaxLength">User name Maximum length 10</P> <PNg-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
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <Linkrel= "stylesheet"href= "Node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style>Body{Padding-top:50px; } </style></Head><Bodyclass= "Container"Ng-app= "App"Ng-controller= "Mainctrl as main"><formname= "UserForm"novalidate> <Divclass= "Form-group"Ng-class= "{' Has-error ': userform.name. $touched && userform.name. $invalid}"> <label>User name</label> <inputtype= "text"name= "Name"class= "Form-control"Ng-model= "Main.name"Ng-minlength= "5"Ng-maxlength= "Ten"Required/> <Divclass= "Help-block"ng-messages= "Userform.name. $error"ng-if= "Userform.name. $touched"> <PNg-message= "MinLength">User name Minimum Length 5</P> <PNg-message= "MaxLength">User name Maximum length 10</P> <PNg-message= "Required">User name required</P> </Div> </Div> <Divclass= "Form-group"Ng-class= "{' Has-error ': Userform.email. $touched && userform.email. $invalid}"> <label>Mailbox</label> <inputtype= "Email"name= "Email"class= "Form-control"Ng-model= "Main.email"Ng-minlength= "5"Ng-maxlength= " the"Required/> <Divclass= "Help-block"ng-messages= "Userform.email. $error"ng-if= "Userform.email. $touched"> <DivNg-messages-include= "emailmessages.html"></Div> </Div> </Div> <Divclass= "Form-group"> <Buttontype= "Submit"class= "Btn Btn-danger">Submit</Button> </Div> <Pre>{{userform.name. $error}}</Pre> <Pre>{{userform.email. $error}}</Pre></form><Scriptsrc= "Node_modules/angular/angular.min.js"></Script><Scriptsrc= "Node_modules/angular-messages/angular-messages.js"></Script><Scriptsrc= "App.js"></Script></Body></HTML>
App.js
Angular.module (' app ', [' ngmessages ']) . Controller (' Mainctrl ', Mainctrl); function Mainctrl () {}Put the form verification of the email here, through <div ng-messages-include= "emailmessages.html" ></div> display to a location on the page.
<PNg-message= "Required">e-mail must be filled</P><PNg-message= "MinLength">Mailbox length is too short</P><PNg-message= "MaxLength">Mailbox length too long</P><PNg-message= "Email">Invalid mailbox</P>
Angularjs using Ngmessages for form validation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
