Angularjs-forms (Form)

Click to view ANGULARJS Series catalogue
Reprint Please specify Source:http://www.cnblogs.com/leosx/

Angular form

input, select the textarea control is used to enter data for the user. Both forms and controls provide validation services so that when the user enters invalid data, it can be known before the form is submitted. Such validation is much better than validating only on the server side, because in front-end verification, users can get good feedback from user input errors! Improve the user experience. Keep in mind that validation on the client side is a very important part of the user experience. But it can easily be tampered with, so we can't trust the front-end verification, and the backend still has to be verified.

A simple form

File One: index.html

<div ng-controller= "Examplecontroller" > <form novalidate class= "Simple-form" > Name: <input type= "Text" Ng-model= "User.Name"/><br/> e-mail: <input type= "Email" ng-model= "user.email"/><br/> Gende R: <input type= "Radio" ng-model= "User.gender" value= "male"/>male <input type= "Radio" ng-model= "User.gender" V Alue= "female"/>female<br/> <input type= "button" ng-click= "Reset ()" value= "reset"/> <input type= "Submit" ng-click= "Update (user)" value= "Save"/> </form> <pre>user = {{user | json}}</pre> <pre >master = {{Master | json}}</pre></div><script> angular.module (' formexample ', []). Controller (' E      Xamplecontroller ', [' $scope ', function ($scope) {$scope. master = {};      $scope. Update = function (user) {$scope. master = angular.copy (user);      };      $scope. reset = function () {$scope. user = Angular.copy ($scope. master);      }; $scope. ReseT (); }]);</script>

：

When the reset button is clicked, the user object is reset to the original saved object.

Please note: novalidate used to disable native browser form validation. If the validation does not pass, then the ngModel corresponding value of the model being bound is not changed.

Use of styles

Using styles, we can better control the form controls, for example: ngModel directives add the following style to the corresponding element:

1, ng-valid : Model validation through

2. ng-invalid : Model validation failed

3. ng-valid-[key] : Key passed by $setValidity increased authentication ()

4. ng-invalid-[key] : Pass the $setValidity added authentication failed key

5 ng-pristine .: There is no interaction with controller.

6. ng-dirty : The controller interacts with it

7, ng-touched : Has lost control

8. ng-untouched : Not yet out of control

9 ng-pending : Asynchronous Authentication ( $asyncValidators ) not finished

The following example uses CSS to display the validity of each form control. In the example, user.name and user.email is necessary, when the focus is lost, it will be verified, if the validation does not pass, then the background color will turn red. This ensures that the user does not ignore the error and that the validation is passed before synchronizing to the controller's model.

File One: index.html

<div ng-controller= "Examplecontroller" > <form novalidate class= "Css-form" > Name: <input type= "Text" ng- Model= "User.Name" required/><br/> e-mail: <input type= "Email" ng-model= "User.email" required/><br /> Gender: <input type= "Radio" ng-model= "User.gender" value= "male"/>male <input type= "Radio" ng-model= " User.gender "value=" female "/>female<br/> <input type=" button "ng-click=" Reset () "value=" Reset "/> & Lt;input type= "Submit" ng-click= "Update (user)" value= "Save"/> </form> <pre>user = {{user | json}}</pr E> <pre>master = {Master | json}}</pre></div><style type= "TEXT/CSS" >. css-form  input.ng-invalid.ng-touched {background-color: #FA787E;  }. Css-form input.ng-valid.ng-touched {background-color: #78FA89; }</style><script> angular.module (' formexample ', []). Controller (' Examplecontroller ', [' $scope ', function ($scope) {$scope. masteR = {};      $scope. Update = function (user) {$scope. master = angular.copy (user);      };      $scope. reset = function () {$scope. user = Angular.copy ($scope. master);      };    $scope. Reset (); }]);</script>

: You can see that the username name verification passed, but the message verification failed and did not pass.

Angularjs-forms (Form)