Open In App

AngularJS ng-form Directive

Last Updated : 01 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Similar Reads

AngularJS ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: &lt;element ng-show="expression"&gt; Contents... &lt;/element&gt; Parameter Value: expre
2 min read
AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: &lt;element ng-init = "expression"&gt; ... &lt;/element&gt;Example: This example descr
1 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is
2 min read
AngularJS ng-dblclick Directive
The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be overridden by this directive, both will be executed.
2 min read
AngularJS ng-keypress Directive
The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elemen
2 min read
AngularJS ng-keydown Directive
The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element's original onkeydown event. Both the onkeydown event &amp; the ng-keydown Directive will be executed. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-k
2 min read
AngularJS ng-keyup Directive
The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-keyup="expression"&gt; Contents... &lt;/element&gt; Parameter: expression: When a keypress is finished, then the followed expression will be executed.Example 1:
2 min read
AngularJS ng-href Directive
The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will most likely return a 404 error while ng-href direct
2 min read
AngularJS ng-focus Directive
The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by &lt;a&gt;, &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-focus="expression"&gt; Contents...
1 min read
AngularJS ng-hide Directive
The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: &lt;element ng-hide="expression"&gt; Contents... &lt;/element&gt; Parame
2 min read