AngularJS ng-form Directive
Last Updated :
01 Aug, 2022
The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls.
Syntax:
<ng-form [name="string"]>
Contents...
</ng-form>
Example 1: This example uses the ng-form Directive to hide the input text fields and display their content.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-form Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "" style = "text-align:center" >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >ng-form Directive</ h3 >
< div >
< ng-form ng-hide = "isDetail" >
Full Name:
< input type = "text" ng-model = "fName" >
< br >< br >
Username:
< input type = "text" ng-model = "uName" >
< br >
</ ng-form >
< br >
< input type = "button"
ng-click = "isDetail=true"
value = "Click it!" />
< div ng-show = "isDetail" >
First Name:< b >{{fName}}</ b >< br />
User Name:< b >{{uName}}</ b >< br />
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example uses the ng-form Directive to validate the email and save it.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-form Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "" style = "text-align:center" >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >ng-form Directive</ h3 >
< div >
< ng-form ng-submit = "save(user)"
name = "myForm" novalidate>
Enter Email:
< input type = "email" name = "uname" required
ng-model = "user.userName" >< br >
< span style = "color:red"
ng-show =
"myForm.uname.$error.required && myForm.uname.$dirty" >
Email is required
</ span >
< br >
< button ng-disabled = "!myForm.$valid" type = "submit" >
save
</ button >
</ ng-form >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...