Where to initialise a FormGroup in Reactive forms?

Question

Using Angular 11 with Typescript 4 in Strict Mode I have:

export class ContactComponent implements OnInit { 

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {

    this.form = this.formBuilder.group({ 
      email: ['', [Validators.required, Validators.email]],
      name: ['', [Validators.required, Validators.maxLength(40)]],
    });

  }

I get the build error:

 Property 'form' has no initialiser and is not definitely assigned in the constructor.

Shouldn't the FormGroup be initialised on ngOnInit?

In strict mode, constructor is where we use to set initially our property. we move our rest of initialization logic in ngoninit. — Gurkan Yesilyurt, Mar 12 '21 at 17:03
My preference is usually to initialize the form when declaring the property `form: FormGroup = this.formBuilder.group({ ... });` — Owen Kelvin, Mar 12 '21 at 17:14

score 17 · Accepted Answer · answered Mar 12 '21 at 20:49

Shouldn't the FormGroup be initialised on ngOnInit?

It doesn't have to be; I find it simplest to initialize most things directly on the class like this:

export class ContactComponent implements OnInit { 

  form = this.formBuilder.group({ 
    email: ['', [Validators.required, Validators.email]],
    name:  ['', [Validators.required, Validators.maxLength(40)]],
  });

  constructor(private formBuilder: FormBuilder) { }

}

This works fine with strictPropertyInitialization.

The exception is when initializing something that requires data from the DOM (@Input, @ViewChild, etc) Since those things get initialized in the various Lifecycle Hooks as described in this answer:

@Input() → ngOnInit
@ViewChild() → ngAfterViewInit
@ContentChildren() → ngAfterContentInit

Initializing something that depends on say, an @Input(), would be done in the corresponding lifecycle hook, ngOnInit, however, this does not appease the strict rule, so the Definite Assignment Assertion Operator ! is needed.

export class ContactComponent implements OnInit { 
  @Input() input!: number;

  inputDoubled!: number;
  
  form = this.formBuilder.group({ 
    email: ['', [Validators.required, Validators.email]],
    name:  ['', [Validators.required, Validators.maxLength(40)]],
  });

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.inputDoubled = this.input * 2;
  }
}

Where to initialise a FormGroup in Reactive forms?

1 Answers1

Linked