LearnKode

8 Example(s) of Ng-Form


Description :

We create a form using ng-form directive.When we fill the fields of form and click on the submit button fields with data will display and form will hide basis on the true,false value of isDetail variable.


Ng-Form Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <ng-form ng-hide="isDetail">
            First Name:
            <input type="text" ng-model="fName">
            <br />
            Last Name:
            <input type="text" ng-model="lName">
            <br />
            User Name:
            <input type="text" ng-model="uName">
            <br />
            Password:
            <input type="password" ng-model="password">
            <br />
        </ng-form>
        <input type="button" ng-click="isDetail=true" value="Submit" />
        <div ng-show="isDetail">
            First Name:<b>{{fName}}</b><br />
            Last Name:<b>{{lName}}</b><br />
            User Name:<b>{{uName}}</b><br />
            Password:<b>{{password}}</b>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a form with some fields, on the click of the save button the entered data is displayed as saved data. The type of button is submit and ng-submit directive call funtion for the save button.


Ng-Form Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <form ng-submit="save(user)">
            First Name:<input type="text" ng-model="user.firstName"> <br />
            Last Name:<input type="text" ng-model="user.lastName"><br />
            User Name:<input type="text" ng-model="user.userName"><br />
            Password:<input type="password" ng-model="user.password"><br />
            Gender: <input type="radio" ng-model="user.gender" value="male" />male
            <input type="radio" ng-model="user.gender" value="female" />female<br />
            <button type="submit">save</button>
        </form>
        <pre>Form:{{user | json}}</pre>
      <pre>Saved Data:{{saveDate | json}}</pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.saveDate = {};
        $scope.save = function (user) {
            $scope.saveDate = angular.copy(user);
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can check the validation of form that uesrname or password field is required etc.


Ng-Form Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <ng-form name="myForm" novalidate>
            User Name:<input type="text" name="uname" required ng-model="user.userName"><br />
            Password:<input type="password" name="password" required ng-model="user.password"><br />
            <button ng-disabled="!myForm.$valid" type="submit">save</button>
        </ng-form>
        <pre>myForm.$valid:<b>{{myForm.$valid}}</b></pre>
        <pre>myForm.uname.$dirty:<b>{{myForm.uname.$dirty}}</b></pre>
        <pre>myForm.uname.$pristine:<b>{{myForm.uname.$pristine}}</b></pre>
        <pre>myForm.password.$error.required:<b>{{myForm.password.$error.required}}</b></pre>
        <pre>myForm.uname.$error.required:<b>{{myForm.uname.$error.required}}</b></pre>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of ng-form the save is enable only when the form is valid as both of the fields required. When user enter valid email and password then the save button is enable otherwise disable. formName.$valid is true when form is valid.


Ng-Form Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <ng-form ng-submit="save(user)" name="myForm" novalidate>
            Email:
            <input type="email" name="uname" required ng-model="user.userName">
            <span style="color:red" ng-show="myForm.uname.$error.required && myForm.uname.$dirty">User Name is required</span>
            <br />
            Password:
            <input type="password" name="password" required ng-model="user.password">
            <span style="color:red" ng-show="myForm.password.$error.required && myForm.password.$dirty">Password is required</span>
            <br />
            <button ng-disabled="!myForm.$valid" type="submit">save</button>
        </ng-form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example there are three input fields created for array of object using ng-repeat directive and these are required but value of third object is empty so that it show error "Above field is required!" if either of three field will empty.


Ng-Form Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <form name="parentForm">
            <div ng-repeat="item in items">
                <ng-form name="child">
                    Tag Name:
                    <input name="name" ng-model="item.name" required>
                    <div style="color:red" ng-if="child.name.$invalid">Above field is required!</div>
                </ng-form>
            </div>
        </form>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.items = [{ name: 'A' }, { name: 'B' }, { name: '' }]
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example when user interact with the form,value of the $dirty becomes true and button gets enable.


Ng-Form Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="myForm" novalidate>
            <label>User Name</label>
            <input type="text" required ng-model="uName" name="name" />
            <br />
            <label>Email</label>
            <input type="email" required ng-model="email" name="age" />
            <br />
            <input type="button" ng-disabled="!myForm.$dirty" ng-click="click()" value="click" />
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.uName = "LearnIt";
        $scope.email = "[email protected]";
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a ng-form inside the ng-form means nested form. First button gets enable if user interact with the form either parent form or child form and the second button gets enable if child form is valid.


Ng-Form Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="parantForm" novalidate>
            <label>User Name</label>
            <input type="text" required ng-model="uName" name="name" />
            <br />
            <label>Email</label>
            <input type="email" required ng-model="email" name="age" />
            <br />
            <input type="button" ng-disabled="!parantForm.$dirty" ng-click="click()" value="click" />
            <br />
            <ng-form name="childForm">
              Address  <input type="text" required ng-model="subText" />
                <br />
                <input type="button" ng-disabled="!childForm.$valid" ng-click="click()" value="click" />
            </ng-form>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.uName = "LearnIt";
        $scope.email = "[email protected]";
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a required URL field in the ng-form. If you leave this field empty or enter invalid url the button gets disable.


Ng-Form Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="editForm" novalidate>
            
            URL:<input type="url" required ng-model="correctUrl" name="correctUrl" /><br />
            <span style="color:red" ng-show="editForm.correctUrl.$error.url">This is not correct URL.</span>
            <br />
            <input type="button" ng-disabled="!editForm.$valid" ng-click="click()" value="click" />
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.correctUrl = "https://learnit.visrosoftware.com";
        $scope.incorrectUrl = "htttps://learnit.visrosoftware.com";
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output