AngularJS ng-form Directive
Last Updated :
01 Aug, 2022
Improve
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.
<!DOCTYPE html>
<html>
<head>
<title>ng-form Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</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.
<!DOCTYPE html>
<html>
<head>
<title>ng-form Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</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:
