- The ng-form directive in AngularJS used to create a nested form. Nested forms mean one form inside the another form.
- HTML does not allow the nesting of form elements.
- It specifies an inherits controls from HTML form.
- For ex: If the validity of a sub-group of control forms needs to be determined in AngularJS.
Syntax for ng-form Directive in AngularJS:
|ng-form | name(optional)||Denotes the name of the form.|
Sample code for ng-form Directive in AngularJS:
Using ng-form directive in AngularJS
- Here using the one form inside another form using ng-form directive in an AngularJS application.
Code Explanation for ng-form Directive in AngularJS:
- The ng-app specifies the root element (<div>) to define AngularJS application.
- The ng-form is declared by inside the <form> tag. The ng-formname is given as “Form”
- The textbox is defined for getting name from user.
- The textbox is defined for getting password from user.
- myForm.$valid is used to check whether the form is valid or not. If the form is valid it returns true otherwise false.
- Form.username.$valid function is used to check whether the username is valid or not. If the username valid is returns true. Here the form is given in the ng-form type so it returns the value but we are using the <form> tag inside the another <form> tag it does not return the value.
- Form.password.$valid function is used to check whether the password is valid or not. If the password valid is returns true.
Sample Output for ng-form Directive in AngularJS:
- The form is displayed on page load.
- When user enter the text in the input field the form (username) is valid then the output displays as true.
- If the user enter the text in the password field then the output displays as the form is valid (like form valid=true).
- The output displays true because the user enter the password in the input field.
- The output displays the true value. Here using the form (form=”myform”) inside the form(form=”form”) so it returns the value only for the first form(“myform”) because html does not allow the nested forms.