angular 14 template driven Cannot read properties of undefined (reading 'control')

Question

I need to refer my form to do some think. This my hmtl code is:

   <form #formField="ngForm">

                <div class="row">

                    <div class="section-border">

I need to take the refer to form so I do this in my ts:

  @ViewChild('formField', { static: true }) flux: NgForm; 

  ngOnInit(): void {

    console.log("first");
    console.log(this.flux) //here is undefined

The problem is when I need to take the form, it is undefined.

Anyone can help me?

Answer 1

The ngOnInit lifecycle hook is called before the view children are initialized. Try to use ngAfterViewInit (from interface AfterViewInit in @angular/core) instead:

ngAfterViewInit(): void {
   console.log('ngAfterViewInit');
   console.log('flux', this.flux);
}

More info on lifecycle hooks order: https://angular.io/guide/lifecycle-hooks