Form in AngularJS

AngularJS complements the form of filling and validation features. You can use ng-click directive to handle the event by clicking on the button and using the flags $ dirty and $ invalid to make it effective. Use novalidate with the form declaration to disable the valicate feature of the form. The control section of the form uses an effective set of AngularJS events.

Events in AngularJS

AngularJS provides many events that can be linked to form controls of HTML. For example, ng-click usually attaches to a button. Here are the events supported by AngularJS.

1. ng-click
2. ng-dbl-click
3. ng-mousedown
4. ng-mouseup
5. ng-mouseenter
6. ng-mouseleave
7. ng-mousemove
8. ng-mouseover
9. ng-keydown
10. ng-keyup
11. ng-keypress
12. ng-change

Introducing ng-click directive in AngularJS

Reset the form's data using the ng-click directive of a button.

 ten = "ho" type = "text" ng-model = "Ho" required >  ten = "ten" type = "text" ng-model = "Ten" required >  ten = "email" type = "email" ng-model = "email" required >  ng-click = "reset ()" > Reset 

Validate data in AngularJS

Here are the variables used to track errors.

1. $ dirty - Notice that the data is changed.
2. $ invalid - Notice that the input is invalid.
3. $ error - Accurate error message.

For example

Here is an example to illustrate the directives introduced above in the AngularJS application:

formtrongAngularjs.html

 Vi du Form in AngularJS  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > 

 

 Ung Dung AngularJS  ng-app = "ungdungAngularjs" ng-controller = "sinhvienController" >  ten = "sinhvienForm" novalidate >  border = "0" > Nhap ho:  ten = "ho" type = "text" ng-model = "Ho" required >  style = " color : red " ng-show = "sinhvienForm.ho. $ dirty && sinhvienForm.ho. $ invalid" >  ng-show = "sinhvienForm.ho. $ error.required" > Ho la bat buoc. Note:  ten = "ten" type = "text" ng-model = "Ten" required >  style = " color : red " ng-show = "sinhvienForm.ten. $ dirty && sinhvienForm.ten. $ invalid" >  ng-show = "sinhvienForm.ten. $ error.required" > Ten la bat buoc. Email address:  ten = "email" type = "email" ng-model = "email" length = "100" required >  style = " color : red " ng-show = "sinhvienForm.email. $ dirty && sinhvienForm.email. $ invalid" >  ng-show = "sinhvienForm.email. $ error.required" > Dia chi Email is bat buoc.  ng-show = "sinhvienForm.email. $ error.email" > Dia Email is not available.  ng-click = "reset ()" > Reset  ng-disabled = "sinhvienForm.ho. $ dirty && sinhvienForm.ho. $ invalid || sinhvienForm.ten. $ dirty && sinhvienForm.ten. $ invalid || sinhvienForm.email. $ dirty && sinhvienForm.email. $ invalid" ng -click = "submit ()" > Submit