0

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?

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
optimus
  • 834
  • 1
  • 10
  • 22
  • why you need template ??? – Pranay Rana Jun 15 '18 at 11:58
  • Use `@ViewChildren('myForm')` and the `QueryList.changes` event, as shown in [this answer](https://stackoverflow.com/a/49227093/1009922). – ConnorsFan Jun 15 '18 at 12:32
  • any reason for negative voting... and why do I need template? Its because I have a reusable component and there is a template output there.....I think may be implementation is wrong or there may be a hack or workaround thats it – optimus Jun 18 '18 at 08:37

1 Answers1

0

access the descendants using {descendants: true}

@ViewChild('myForm', {descendants: true}) myForm;
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • tried that, getting this error: Argument of type '{ descendants: boolean; }' is not assignable to parameter of type '{ read?: any; }' – optimus Jun 15 '18 at 10:49