TS2564: Property 'signupForm' has no initializer and is not definitely assigned in the constructor

Question

I'm using ViewChild for angular form submit. This is my code,

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('f') signupForm: NgForm; 

    onSubmit(){
        console.log(this.signupForm);
    }
}

app.component.html

<form #f="ngForm" (ngSubmit)="onSubmit()" novalidate></form>

But I'm getting this error,

src/app/app.component.ts:11:21 - error TS2564: Property 'signupForm' has no initializer and is not definitely assigned in the constructor.

11 @ViewChild('f') signupForm: NgForm;

Answer 1

Finally found an answer. I had to make strictPropertyInitialization flag to false inside tsconfig.json. Adding this since someone came up with same issue would find this useful. (You may have to use ng serve again)

tsconfig.json

{
  "compilerOptions": {
    ...
    "strictPropertyInitialization": false
  }
}

Answer 2

You could also do this:

@ViewChild('f') signupForm!: NgForm; 

With the ! operator you basically say: I know what I'm doing and I know that angular will set this value for me. See this answer for more information about the operator.