ngForm参考变量在ng-template中返回未定义

Question

I am trying to inject a form in a custom component and I am dynamically loading that component. For this case, while referencing the ngForm template variable, I am getting undefined:

<app-custom-component [template]="myTemplate">
    <ng-template #myTemplate>
        <form #myForm="ngForm">
            .....
        </form>
    </ng-template>
</app-custom-component>

Now in my component.ts

@ViewChild('myForm') myForm;
ngAfterViewInit() {
    this.buyAmountForm.valueChanges.subscribe(values => this.validate()); //--> undefined, no valueChanges
}

If I remove the ng-template , everything works fine. Any workaround to get past this?

Answer 1

使用{descendants: true}访问后代

@ViewChild('myForm', {descendants: true}) myForm;