是否可以在 angular 中传递对 ng-template 的有效引用

Question

I'm using Angular 8 and I have the below code structure.

<div class="addForm" *ngIf="activeForm == 1">
    <form [formGroup]="addForm1">
        <div>
            ---
            ---
            <!-- footer area -->
            <ng-container *ngTemplateOutlet="submitCancelAndReset;context:{isValid: this.addForm1.valid}"></ng-container>
        </div>
    </form>
</div>
<div class="addForm" *ngIf="activeForm == 2">
    <form [formGroup]="addForm2">
        <div>
            ---
            ---
            <!-- footer area -->
            <ng-container *ngTemplateOutlet="submitCancelAndReset;context:{isValid: this.addForm2.valid}"></ng-container>
        </div>
    </form>
</div>
<div class="addForm" *ngIf="activeForm == 3">
    <form [formGroup]="addForm3">
        <div>
            ---
            ---
            <!-- footer area -->
            <ng-container *ngTemplateOutlet="submitCancelAndReset;context:{isValid: this.addForm3.valid}"></ng-container>
        </div>
    </form>
</div>
    

<ng-template #submitCancelAndReset let-isValid="isValid">
    ---
    ---
    <button type="submit" [disabled]="!isValid">SAVE</button>
    ---
    ---
</ng-template>

Here, the footer area is same for all three forms and so I created a common ng-template which includes a submit button with dynamic disabled property. Now I need to pass each form's valid state as input parameter to the ng-template, which will bind to the disabled property.. Is that possible?

Answer 1

After hours of debugging I found out that there was an extra validation method that is based on an optional API call for form2 and form3, and unfortunately I used OR condition instead of AND..

FYI - This issue is resolved and it is possible to pass different form's reference to a common ng-template using above code.