AngularJs ng-form Directive (AngularJs Form)

Wednesday, February 10th, 2016 (0 Comment)

FORM used to manipulate to get information when users enter data in and submit the form on the website. Now Server will receive and process information. Therefore in web applications, FORM is a very important role, so in AngularJs also cannot missing this objects (AngularJs Form).

1. AngularJs Form Directive

Form in AngularJs defined following default classes:

  • ng-valid: Form valid.
  • ng-invalid:Form invalid.
  • ng-pristine: Form have not further action.
  • ng-dirty: Form have further action.
  • ng-submitted: submitted form.

Example 1: Adjust the available classes of angularjs form. if not enter data in input tag, display yellow background. Vice versa if enter data in input tag then display orange background.

Demo

  • Line 8 – 10: create css class for form
  • Line 11 – 13: edit ng-invalid css of angularjs when form invalid (not enter data)
  • Line 21: added attribute “required” to the default classes have effect.
  • Line 24: show valid of input tag in form
  • Line 25: show error of input tag in form.
  • Line 26: show form valid.

2. What is ng-form directive?

ng-form in AngularJs is responsible for the data link when the value of Form is correct (valid). In normal JavaScript, to handler submit envent we will use the Form available event that is onsubmit = “function()”. AngularJs form is too, but it is different syntax that we will use ng-submit = “function() “

As you know when working with AngularJS, everything is stored in the $scope object  so function() inside ng-submit is also a function of the $scope.

Example 2: build a program that allows users to import a list of users  and stored in an array and then print out your browser. You create a file with the following content.

Demo

  • Line 11: using ng-submit directive in form ng-submit=”submit()”
  • You enter text and press Enter or click the Add button, the data is immediately saved to the list,  you can research more detail in the javascript controller.

Output:

Notes: when submit form, you cannot see reload page so in angularjs use many API and reload by Ajax.

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *