Imitating that I want to build an AngularJS Form, but the problem is ....
It is found that during initialization, the ng-model and the value in the input tag do not have a tacit understanding or conflict ..
Later, I want to assign $ scope. formData = {'name': 'zhangsan'} to AngularJS controller '};
You can use the php program to assign the value to this AngularJS controller.
| The code is as follows: | |
| <! -- AngularJS controller --> |
|
<! -- Corresponding to input adjustment in form -->
| The code is as follows: | |
| <Input type = "text" name = "name" ng-model = "formData. name" class = "form-control" placeholder = "Role Name"> |
|
Later, I searched again and found there are other methods, such a Dongdong ng-init = "formData. name = 'Zhang San '"
| The code is as follows: | |
| <Input type = "text" name = "name" ng-model = "formData. name" ng-init = "formData. name = 'Zhang San'" value = ""> |
|
Okay, it's very simple. Let's take a look.
Event
AngularJS provides multiple events that can be associated with HTML controls. For example, ng-click is usually associated with a button. The following are events supported by AngularJS.
Ng-click
Ng-dbl-click
Ng-mousedown
Ng-mouseup
Ng-mouseenter
Ng-mouseleave
Ng-mousemove
Ng-mouseover
Ng-keydown
Ng-keyup
Ng-keypress
Ng-change
Ng-click
Use the command to click a button to reset the data in the form.
| The code is as follows: | |
| <Input name = "firstname" type = "text" ng-model = "firstName" required> <Input name = "lastname" type = "text" ng-model = "lastName" required> <Input name = "email" type = "email" ng-model = "email" required> <Button ng-click = "reset ()"> Reset </button> <Script> Function studentController ($ scope ){ $ Scope. reset = function (){ $ Scope. firstName = "Mahesh "; $ Scope. lastName = "Parashar "; $ Scope. email = "MaheshParashar@yiibai.com "; } $ Scope. reset (); } </Script> |
|
Verify data
You can use the following trace error.
$ Dirty-the specified value has been changed.
$ Invalid-the status of this value is invalid.
$ Error-indicates the exact error.
Example
The following example shows all the preceding commands.
| The code is as follows: | |
| TestAngularJS.html <Html> <Head> <Title> Angular JS Forms </title> <Style> Table, th, td { Border: 1px solid gray; Border-collapse: collapse; Padding: 5px; } Table tr: nth-child (odd ){ Background-color: # f2f2f2; } Table tr: nth-child (even ){ Background-color: # ffffff; } </Style> </Head> <Body> <H2> AngularJS Sample Application <Div ng-app = "" ng-controller = "studentController"> <Form name = "studentForm" novalidate> <Table border = "0"> <Tr> <td> Enter first name: </td> <input name = "firstname" type = "text" ng-model = "firstName" required> <Span style = "color: red" ng-show = "studentForm. firstname. $ dirty & studentForm. firstname. $ invalid"> <Span ng-show = "studentForm. firstname. $ error. required"> First Name is required. </span> </Span> </Td> </tr> <Tr> <td> Enter last name: </td> <input name = "lastname" type = "text" ng-model = "lastName" required> <Span style = "color: red" ng-show = "studentForm. lastname. $ dirty & studentForm. lastname. $ invalid"> <Span ng-show = "studentForm. lastname. $ error. required"> Last Name is required. </span> </Span> </Td> </tr> <Tr> <td> Email: </td> <input name = "email" type = "email" ng-model = "email" length = "100" required> <Span style = "color: red" ng-show = "studentForm. email. $ dirty & studentForm. email. $ invalid"> <Span ng-show = "studentForm. email. $ error. required"> Email is required. </span> <Span ng-show = "studentForm. email. $ error. email"> Invalid email address. </span> </Span> </Td> </tr> <Tr> <td> <button ng-click = "reset ()"> Reset </button> </td> <button Ng-disabled = "studentForm. firstname. $ dirty & studentForm. firstname. $ invalid | StudentForm. lastname. $ dirty & studentForm. lastname. $ invalid | StudentForm. email. $ dirty & studentForm. email. $ invalid" Ng-click = "submit ()"> Submit </button> </td> </tr> </Table> </Form> </Div> <Script> Function studentController ($ scope ){ $ Scope. reset = function (){ $ Scope. firstName = "Mahesh "; $ Scope. lastName = "Parashar "; $ Scope. email = "MaheshParashar@yiibai.com "; } $ Scope. reset (); } </Script> <Script src = "angular. min. js"> </script> </Body> </Html> |
|
Output
Open textangularjs.html in the WebBrowser. The result is as follows.
Common form verification commands
1. Required verification
Whether the input of a form has been filled in. You only need to add the HTML5 mark required to the input field element:
<Input type = "text" required/>
2. Minimum length
Verify that the text length entered in the form is greater than a minimum value. Run the command ng-minleng = "{number}" on the input field }":
<Input type = "text" ng-minlength = "5"/>
3. Maximum length
Verify whether the text length entered in the form is smaller than or equal to a certain maximum value. Run the command ng-maxlength = "{number}" on the input field }":
<Input type = "text" ng-maxlength = "20"/>
4. Pattern matching
Use ng-pattern = "/PATTERN/" to ensure that the input matches the specified regular expression:
<Input type = "text" ng-pattern = "/[a-zA-Z]/"/>
5. Email
Verify whether the input content is an email. Set the input type to email as follows:
<Input type = "email" name = "email" ng-model = "user. email"/>
6. Number
Verify whether the input content is a number and set the input type to number:
<Input type = "number" name = "age" ng-model = "user. age"/>
7. URL
Verify whether the input content is a URL and set the input type to url:
<Input type = "url" name = "homepage" ng-model = "user. facebook_url"/>
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
