AngularJS Multiple Transclusion

Question

I have an AngularJS directive with multiple transclusions and one transclusion slot is wrapped by a form.

Everything is working fine except for the form validation messages.

The directive template:

<ng-form name="nbcardform" ng-submit="submit()" novalidate>
    <ng-transclude ng-transclude-slot="back"></ng-transclude>
    <div class="row">
        <div class="col-xs-12">
            <button type="submit">Save</button>
        </div>
    </div>
</ng-form>

Here is an example of the directive usage:

<nb-card>
    <nb-card-back>
        <input type="text" name="username" ng-model="vm.username" required>
        <div ng-messages="nbcardform.username.$error" role="alert">
            <div ng-message="required">Required field</div>
        </div>
    </nb-card-back>
<nb-card>

For some reason the expression nbcardform.username.$error is undefined.

Can someone help me with this?

Answer 1

You should be creating a subform in your directive as it's scope is (likely?) different and it has no idea what nbcardform is.

<nb-card ng-form="myDirectiveForm">
    <nb-card-back>
        <input type="text" name="username" ng-model="vm.username" required>
        <div ng-messages="myDirectiveForm.username.$error" role="alert">
            <div ng-message="required">Required field</div>
        </div>
    </nb-card-back>
<nb-card>

This will still wire in nicely and in the parent directive you could use something like this:

<ng-form name="nbcardform" ng-submit="submit()" novalidate>
    <ng-transclude ng-transclude-slot="back"></ng-transclude>
    <div class="row">
        <div class="col-xs-12">
            <button type="submit">Save</button>
        </div>
    </div>
    {{ nbcardform.$valid }}
    {{ nbcardform.myDirectiveForm.$valid }}
    {{ nbcardform.myDirectiveForm.username.$valid }}
</ng-form>