Building dynamic angular forms with ngrepeat and ngform - angularjs

Question

I'm using AngularJS 1,5 and the trick which I'm looking for is below.
For example, this is form:
<form name="main">
<div ng-repeat="user in users" ng-init="subForm='tags'+$index">
<ng-form name="{{subform}}"
<input type="text" name="username" ng-model="user.username" required/>
<input type="text" name="name" ng-model="user.name" required/>
<input type="email" name="email" ng-model="user.email" required/>
<input type="hidden" name="status" ng-model="user.status"/>
</ng-form>
</div>
</form>
I want to watch my models gathered from the ng-form child in the controller to check on their validity.
self.Scope.$watch('main[subForm].$valid', function ()
{
if (self.Scope.myform.subForm.$valid)
{
$scope.user.status = true;
}
});
Is there any way to implement something like that or should I create a custom directive.

Answer 1

In this sample we create our model as "forms" and send it to the directive, the parent form is valid if one of that forms is complete, by complete each form the user state will change
index.html
<div class="container" ng-app="app" ng-controller="ctrl">
<form name="parent_form">
<ng-form data-form="parent_form" data-list="forms"></ng-form>
<button type="submit" class="btn btn-default" ng-disabled="parent_form.$invalid">Submit</button>
</form>
</div>
app.js
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.forms = [
{ name: "form1", isValid: false },
{ name: "form2", isValid: false }
];
});
ngForm.html
<div name="form_{{form.name}}" ng-repeat="form in list">
<h3>{{form.name}}</h3>
<div class="form-group">
<label for="username">username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="form.user.username" ng-required="true" />
</div>
<div class="form-group">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="form.user.name" ng-required="true" />
</div>
<div class="form-group">
<label for="email">email</label>
<input type="email" class="form-control" id="email" name="email" ng-model="form.user.email" ng-required="true" />
</div>
<label>user state is:</label>{{form.user.status}}
<hr />
</div>
ngForm.js
Directive with form handler
app.directive("ngForm", function ($filter) {
return {
restrict: 'E',
templateUrl: "ngForm.html",
scope: {
list: "=",
form: "="
},
link: function (scope) {
var isValid = function (list) {
var hasUser = $filter("filter")(list, { hasUser: true }, true);
if (hasUser.length >= 1) {
scope.form.$invalid = false;
} else {
scope.form.$invalid = true;
}
angular.forEach(list, function (item) {
if (angular.isDefined(item.user)) {
if ((angular.isDefined(item.user.username) && item.user.username !== null) &&
(angular.isDefined(item.user.name) && item.user.name !== null) &&
(angular.isDefined(item.user.email) && item.user.email !== null)) {
item.user.status = true;
item.isValid = true;
item.hasUser = true;
} else {
item.user.status = false;
item.isValid = false;
item.hasUser = false;
}
}
});
}
scope.$watch("list", function (nVal) {
if (nVal) {
isValid(nVal);
}
}, true);
}
}
});