AngularJS - Validation for a form in a directive when 'save' button is clicked in the parent view

Question

So I have a view made up of several directives. Each directive has a form in its template.

<div>
  <form name="blah">
    <input name="name1" ng-model="abc">
    <directive-a something-a="a"></directive-a>
    <directive-b something-b="b"></directive-b>
  </form>
</div>
<button ng-click="save( blah )">Save</button>

1. How can I validate the forms inside 'directive-a' and 'directive-b' when I click the Save button?
2. The user can navigate away from within 'directive-b' to another view. In that case, if the form 'blah' is dirty, the user must be notified to save his changes before he can navigate away. How can I check the form validity of 'blah' inside 'directive-b'?

Any insight is highly appreciated. Thanks!

Answer 1

1. How can I validate the forms inside 'directive-a' and 'directive-b' when I click the Save button?

you can access this form from controller like $scope.form . if any of childs are invalid, in this case directive-a or directive-b $scope.form.$valid will be false. so for example in save function you can have something like this

$scope.save = function() {
    if( !$scope.form.$valid ) {
        applyError();
        return;
    }
    ...   
}

save will be canceled and error will be applied (of course you have to implement this error applying functionality yourself...)

2. The user can navigate away from within 'directive-b' to another view. In that case, if the form 'blah' is dirty, the user must be notified to save his changes before he can navigate away. How can I check the form validity of 'blah' inside 'directive-b'?

here again, you can check if form is dirty like this $scope.form.$dirty and if it is dirty just stop redirecting user and show alert or something.

Hope that helps... :)