>>>Hi,
>>>
>>>More details about my original question
http://stackoverflow.com/questions/32016037/propagating-views-dirty-state-to-the-containing-form>>>
>>>I've created a new directive, but from that directive I don't know which event to hook to set parentForm dirty status when my form dirty status is changing.
>>>
>>>Thanks in advance.
>>
>>Can't you just add a scope.$watch on form.$dirty ?
>
>Can you please elaborate a bit? Where should I place the code? Most of my views are controlled by the same controller. Each view is its own form (chtml page).
Haven't looked that closely at your code but I'd have thought anywhere where you have access to the parent form $setValidity().
But I don't really know why you need to do this - if you have nested ng-forms then invalid child forms should set validity on the parent form automatically.
Simple example:
<!DOCTYPE html>
<html ng-app="nestedForms" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested Forms</title>
<script src="../../Scripts/angular.js"></script>
<script src="../../Scripts/angular-ui-router.js"></script>
</head>
<body>
<script type="text/javascript">
var app = angular.module('nestedForms', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('child', {
template: '<ng-form name="childForm" ng-controller="childController"><input name="childInput" ng-model="childText" required /></ng-form>',
controller: childController
});
});
app.controller('mainController', mainController);
app.controller('childController', childController);
//Main Form Controller
function mainController($scope,$state) {
$scope.mainText = "Main Form Text";
$scope.loadView = function () {
$state.go('child');
};
}
//Child Form Controller
function childController($scope) {
$scope.childText = "Child Form Text";
}
</script>
<ng-form name="mainForm" ng-controller="mainController">
<input name="mainInput" ng-model="mainText" required />
<input type="button" value="Load Child View" ng-click="loadView()"/>
<div>Main Form valid:{{mainForm.$valid}}</div>
<section ui-view></section>
</ng-form>
</body>
</html>
