Dynamically check for form completion within a div - html

Question

<div class="well">
<div class="panel-title>
<span class="fa fa-caret-right" ng-if="!showGeneral"></span>
<span class="fa fa-caret-down" ng-if="showGeneral"></span>
</div>
<label>GENERAL</label>
<div ng-if="generalFormName.$valid" class="pull-right">
<i class="fa fa-check" style="color:#4cc94c;font-size:large;"></i>
</div>
<div class="panel-collapse" ng-if="showGeneral">
<general></general>
</div>
</div>
<div>
<form name="generalFormName" novalidate autocomplete="off">
<input type="text" class="form-control align" required ng-model="infor.name" />
</form>
</div>
The directive general is another html. When the required fields in that form are filled in by the user I need a check mark to displayed to the right of the label. I do not have any button to submit and send the form data and then check for validation. I just need a check mark when formname.$valid. I added an ng-if but for some reason I am not able to get it.
Can someone help me out on this? Would be of great help .
Thanks in advance.

Answer 1

A form in Angular makes its validation state available through its name and only to its scope and the descendant scopes. Currently the <general> directive is outside the form's scope, so it cannot access the validation data. The simplest solution is to reposition the form to enclose both the input(s) and the <general> directive:
<form name="generalFormName" novalidate autocomplete="off">
<div class="well">
...
<general></general>
...
</div>
<div>
<input type="text" class="form-control align" required ng-model="infor.name" />
</div>
</form>
If the <form> must absolutely stay where it is, you can wrap it with an ng-form and use the ng-form's validity in <general>:
<div ng-form="ngFormName">
<div class="well">
...
<general valid="ngFormName.$valid"></general>
...
</div>
<div>
<form name="generalFormName" novalidate autocomplete="off">
<input type="text" class="form-control align" required ng-model="infor.name" />
</form>
</div>
</div>
The validity of the inner generalFormName affects the validity of the wrapper ngFormName.
If neither solution works (I don't see a reason why), you can always create a directive that publishes the validity of its adjacent form to a variable in the parent scope. Using variables in the parent scope is tricky, and I believe the previous solutions should be adequate, so I will not go in details. Instead of a variable, it could invoke a callback function - expect less surprises.