Events and forms for 8-angular

The previous article says the Click event, with its similar mouseover and MouseMove, and so on. Let's take a look at the selected, change, copy and other events used in the form.

Selected

<div ng-controller= "AAA" >        <input type= "checkbox" Ng-model= "AAA" value= "{{AAA}}" >    <select >        <option>11111</option>        <option ng-selected= "AAA" >22222</option>        < option>33333</option>    </select></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {}]); </script>

If we want a select to select the specified option, you only need to set the option to selected= "selected", now for the second binding a variable AAA, corresponding to the Ng-model of a radio box, However, when the Radio box is selected, AAA is true, and when unchecked, false so that the option's selected is set.

Change

<div ng-controller= "Aaa" >    <input type= "text" ng-change= "bbb= ' Hello '" ng-model= "BBB" >
    <p>{{bbb}}</p></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {}]); </script>

When the contents of the input box are found to be changed, make the BBB variable ' hello '.

Copy

<div ng-controller= "Aaa" >    <input type= "text" value= "XIECG" ng-copy= "ccc= ' Hello '" >    <p>{{ Ccc}}</p></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {}]); </script>

When we paste the content into the input box, the CCC value becomes ' hello '.

In addition, there are cut (cut), paste (paste event).

Here is an example of a specific form validation:

<! DOCTYPE html>

. Username. Ng-valid{background-color:lightgreen;}
. Username. ng-invalid{background-color:lightcoral;}
. Username. Ng-pristine{background-color: #fafafa;}
/*
. Username. ng-dirty{}
. Username. ng-invalid-required{}
. Username. ng-invalid-minlength{}
. Username. ng-valid-max-length{}
*/

</style> for= "name" > User name </label> </div> <div class= "col-md-8 username" > <input class= "Form-control" id= "name" name= "name" type= "text" Required ng-pattern= "/^[a-za-z]{0,6}$/" Ng-model= ' User.Name '/> <span class= "Glyphicon glyphicon-ok form-control-feedback" ng-show= "MyForm.name. $di Rty && myform.name $valid "></span> <span class=" Glyphicon glyphicon-remove Form-con            Trol-feedback "ng-show=" myform.name. $dirty && myform.name. $invalid "></span> </div>                     </div> <div class= "Form-group has-feedback" > <div class= "col-md-4" > <label for= "url" >URL</label> </div> <div class= "col-md-8" > &lt Input type= "url" id= "url" name= "url" ng-model= "User.url" class= "Form-control"/> <span class= "GL Yphicon glyphicon-ok form-control-feedback "ng-show=" Myform.url. $dirty && myform.url. $valid "></span                > </div> </div> <div class= "Form-group text-center" > <input class= "btn btn-primary btn-lg" ng-disabled= "MyForm. $invalid" type= "Submit" value= "Submit"/> < /div> </form> </div> <div class= "col-md-12" > <p>User name: {{User.Name}} not modified: {{myform.name. $pristine}} Modified: {{myform.name. $dirty}} Validation failed: {{myform.name. $invalid}} Validation succeeded: {{myform.name. $valid}} required:{{myform.name. $error. Required} }        </p> <p>Url:{{user.url}} not modified: {{myform.url. $pristine}} Modified: {{myform.url. $dirty}} Validation failed: {{myform.url. $invalid}} Validation succeeded: {{myform.url. $valid}} Error Details: {{myform.url. $error}}</p> </div></div><script type= "Text/javascript" >varM1 = Angular.module (' myApp '),[]); M1.controller (' Aaa ', [' $scope ', ' $interval ',function($scope, $interval) {$scope. SubmitForm=function(isvalid,data) {//Verify that the form is submitted            if(isValid) {console.log (data); }Else{Console.log (' Validation failed ');    }        }; }]);</script></body>
First look at the form section, use the Novalidate property to disable the form default validation behavior, and bind the Ng-submit bound SubmitForm method.
A required is set on input to the user name, indicating that it cannot be empty. Ng-pattern is a custom regular expression. Ng-model is the data (the user fills in the data).
The input to the URL is also a similar setting.
Take a look at the SubmitForm function that is bound in the form, passing two arguments, MyForm. $valid and user.
MyForm is the name of the form, representing the entire form, MyForm. The $valid is a Boolean value that indicates whether the elements of the entire form are validated, and user is the data that users fill in to submit the data. We can all get this information through the controller and then submit it to the backend.
MyForm represents the entire form, gives input the name value, and can get input verification information, we take the user name of input as an example.
User name: {{User.Name}}
Not modified: {{myform.name. $pristine}}
Modified: {{myform.name. $dirty}}
Validation failed: {{myform.name. $invalid}}
Validation succeeded: {{myform.name. $valid}}
Required:{{myform.name. $error. Required}}
Except for the first one here, the others are Boolean values.
There are two span elements on the user name's input sibling, which are the correct and wrong icons, respectively. (Ng-show is used to control the display and hiding of elements, which is described in detail later)
Myform.name. $dirty && myform.name. $valid When the user modifies the value of input and the validation is successful, we give the correct hint.
Myform.name. $dirty && myform.name. $invalid When the user modifies the value of input, but unfortunately the validation fails, we give a hint of failure.
In addition, angular provides the class with hints on how to do more styles for us.
Angular when doing validation, these attributes are added to the element in a timely manner, making it easy to customize these classes to implement specific scenario applications.
We can do Ajax submissions when we're all typed in correctly.
Learn notes, if there is insufficient, please correct me! Reproduced please keep the original link, thank you.
Finally, the micro-Bo powder, thank you.
Events and forms for 8-angular