Angular implements Form Verification and submission. angular forms

Angular implements Form Verification and submission. angular forms

In this example, the Angular framework is used to implement simple form verification.

I. html Structure

1. Using bootstrap to quickly write a simple form
The main code is as follows:

<Div class = "container" style = "margin-top: 30px;" ng-controller = "myCtrl"> 

2. Form Verification FAQs and instructions

1) Question:
How to bind data-two-way binding
Validation form-Regular Expression
"Error message displayed
Verification of the entire Form
Avoid submitting unverified forms
Prevent multiple submissions
2) Common commands
Instructions:
Ng-model, ng-required, ng-pattern, ng-maxlength, ng-minlength, ng-change
Style:
Ng-valid, ng-invalid, ng-pristine, ng-dirty
Form control variables
FormName. inputFieldName. $ error: Field error message
FormName. inputFieldName. $ dirty: whether the field is modified
FormName. inputFieldName. $ pristine: whether the field is in the initial state.
FormName. inputFieldName. $ valid: whether the field is valid
FormName. inputFieldName. $ invalid: whether the field is invalid

Ii. function implementation
2.1 user name verification
User input username field verification mainly refers to length verification and whether it is required
1. ng-model binds form data to use angular's authentication api.
2. ng-minlength, ng-maxlength specifies the long field segment. required fields are required for required.
3. The error message uses formName. inputFieldName. $ error. minlength/maxlength to determine whether to display the error message. When the input is invalid, the error message corresponding to $ error is true.
As follows:

<Div class = "form-group"> <label for = "username" class = "col-sm-3 control-label"> User Name </label> <div class = "col-sm-9"> <input type = "text" autocomplete = "false" name = "username" placeholder = "username" ng-model = "data. username "id =" username "ng-minlength =" 5 "ng-maxlength =" 15 "class =" form-control "required> <div class =" alert-danger help -block "ng-show =" myForm. username. $ error. minlength "> the length of the user name cannot be less than 5 Characters </div> <div class =" alert-danger help-block "ng-show =" myForm. username. $ error. maxlength "> the length of the user name cannot exceed 15 characters </div>
2.2 password Validation
The user password verification must ensure that the passwords entered twice are consistent and will not be verified before the user password is entered.
1. Bind data ng-model = data. pwdConfirm (all form data is saved to the data Object)
2. determine data. pwdConfirm! = Data. password: Check whether the two passwords are consistent.
3. Use formName. inputField. $ dirty to check whether this item has been filled in.

<Div class = "form-group"> <label class = "col-sm-3 control-label"> Confirm Password </label> <div class = "col-sm-9"> <input type =" password "name =" pwdConfirm "ng-model =" data. pwdConfirm "placeholder =" Confirm Password "id =" pwdConfirm "required class =" form-control "> <div class =" alert-danger "ng-show =" data. pwdConfirm! = Data. password & myForm. pwd. $ dirty "> the two passwords are inconsistent </div>
2.3 email Verification
Email verification mainly verifies whether the email format is correct and the Field Length
1. Use the New type attribute value email in H5
2. Use the ng-pattern command to define the email address verification regular expression.
3, mailbox verification common Regular Expression: ^ ([a-zA-Z0-9 _-]) + @ ([a-zA-Z0-9 _-]) + (. [a-zA-Z0-9 _-]) +
4. Use myForm. email. $ error. pattern to verify whether the email format is correct.

<Div class = "form-group"> <label class = "col-sm-3 control-label"> mailbox </label> <div class = "col-sm-9"> <input type = "email "name =" email "ng-model =" data. email "placeholder =" email "class =" form-control "required ng-pattern ="/^ ([a-zA-Z0-9 _-]) + @ ([a-zA-Z0-9 _-]) + (. [a-zA-Z0-9 _-]) +/"> <div class =" alert-danger help-block "ng-show =" myForm. email. $ error. minlength "> the mailbox length cannot be less than 5 Characters </div> <div class =" alert-danger help-block "ng-show =" myForm. email. $ error. pattern "> enter the correct email format </div> <div class =" alert-danger help-block "ng-show =" myForm. email. $ error. maxlength "> the mailbox length cannot exceed 30 characters </div>
2.4 Single check box
The single check box mainly determines the Data Binding problem and the Data Rendering of the check box
1. Bind data in the form of data Object Attributes
2. Multiple option values are traversed through ng-repeat.
3. Set the value to differentiate the value when submitting the request.
<Div class = "form-group"> <label class = "col-sm-3 control-label"> gender </label> <div class = "col-sm-9"> <label class = "radio -inline "> <input type =" radio "name =" sex "value =" 1 "ng-model =" data. sex "/> male </label> <label class =" radio-inline "> <input type =" radio "name =" sex "value =" 0 "ng-model = "data. sex "/> female </label> </div> <div class =" form-group "> <label class =" col-sm-3 control-label "> hobbies </label> <div class = "col-sm-9"> <label class = "radio-inline" ng-repeat = "holobby in hobbies"> <input type = "checkbox" name =" holobby "ng-model =" hobbiesC "value =" {holobby. id }}"/>{{ holobby. name }}</label> </div> <div class = "col-sm-9 col-sm-offset-3"> <input type = "reset" class = "btn-danger" value = "reset"> <input type = "submit" class = "btn-primary" value = "submit"> </div>
2.5 second-level urban linkage
1. City Data Definition: each city object includes the id, parent, and name attributes. The id is unique to each city province. The parent is determined by the parent province or city.
2. Use the ng-options command to Traverse City Data
2.5.1 City Data Model
Define the data model through \ $ scope. cities

$ Scope. cities = [{id: 1, parent: 0, name: 'sichuan}, {id: 2, parent: 1, name: 'chengdu '},...]
2.5.2 rendering of City Data in html
Use the ng-options command and ng-model command to traverse data and set the default value.
<Div class = "form-group"> <label class = "col-sm-3 control-label"> Place of Birth </label> <div class = "col-sm-3"> <select name = "birthAddress "id =" "ng-model =" data. province "ng-options =" c. id as c. name for c in cities "> <option value =" "> -- select -- </option> </select> </div>
Note:
1. ng-options = "obj. name for obj in datas" common usage. Set the value of the option label to id through obj. id as obj. name and the content to name
2. ng-model can be used to set the default value of select.
2.5.3 define filters used to filter provinces and cities
.filter("cityFilter",function(){  return function(input,parent){    var filtedData=[];    angular.forEach(input,function(value,key){      if(value.parent===parent){        filtedData.push(value)      }    })    return filtedData;  }})
Note:
1. Define cityFilter and pass in a parent as the parameter to traverse the incoming data and determine if it is equal to the passed parent to determine the level of the current city.
2. The returned filtedData is the filtering result.
3. angular is used. forEach (obj, fn) iterator, where fn has three parameters passed in, namely value, key, obj; value is the object Currently traversed, the key is the unique identifier of the traversal, and obj is the array or object to be traversed.
Use (province): ng-options = "c. id as c. name for c in cities | cityFilter: 0"

2) Select a city
1. Filter Cities Based on data. province
2. Similarly, you can set the area option box (ng-show command) when the city is selected)

<Div class = "col-sm-2"> <select name = "birthC" ng-model = "data. cities "ng-options =" c. id as c. name for c in cities | cityFilter: data. province "> <option value =" "> -- select -- </option> </select> </div> <div class =" col-sm-2 "ng-show = "! MyForm. birthC. $ pristine "> <select name =" birthD "ng-model =" data. district "ng-options =" c. id as c. name for c in cities | cityFilter: data. cities "> <option value =" "> -- select -- </option> </select> </div>
2.6 form submission
1. Functional requirements: The submission button becomes invalid (ng-disabled) When form verification fails ),
Html structure:
<Div class = "col-sm-9 col-sm-offset-3"> <input type = "reset" class = "btn-danger" value = "reset" ng-click = "reset () "> <input type =" submit "class =" btn-primary "value =" submit "ng-disabled =" myForm. $ invalid "> </div>
Js:
  $scope.reset=function(){    $scope.myForm.$setPristine();  }
Note: There is a $ setPristine () method in the form to reset the original state of the form, class, $ dirty, $ pristine will restore the original state. Note that the error message $ error of the form is not hidden. Therefore, when verifying the form, remember that every error message is determined by $ dirty.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.