Form in Angularjs: What You Need to Know

Form in Angularjs is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

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 instance,, ng-click typically attaches to a button. Here are the 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

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.

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

For instance,

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

FAQ

What should you know about events in AngularJS?

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