Ng-Form-7

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.

<!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>

Output