FormGroup initializaton issue

Question

While trying to run the angular app with login form, defined as shown below, it throws an Error:

src/app/pages/auth/login/login.component.ts:12:3 - error TS2564: Property 'loginForm' has no initializer and is not definitely assigned in the constructor.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.loginForm = new FormGroup({
      email: new FormControl('', {
        validators: [Validators.required, Validators.email]
      }),
      password: new FormControl('', { validators: [Validators.required] })
    });
  }

  onSubmit() {
    this.authService.login({
      email: this.loginForm.value.email,
      password: this.loginForm.value.password
    });
    console.log("logging in...");
  }

}

Does anyone know what is the correct way to initialize FormGroup?

this issue was for me too, I moved formGroup initialization to constructor and worked. — tmsbrndz, Mar 23 '21 at 16:06
`form: FormGroup = new FormGroup({ ....}) ` this will solve the issue. After that use with `this.form` — GMAC, Mar 23 '21 at 16:09
Does this answer your question? [Property '...' has no initializer and is not definitely assigned in the constructor](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) — Owen Kelvin, Mar 23 '21 at 17:32

bryan60 · Accepted Answer · 2021-03-23T16:15:03.513

do it in the constructor, as per the error message:

constructor(private authService: AuthService) {
  this.loginForm = new FormGroup({
    email: new FormControl('', {
      validators: [Validators.required, Validators.email]
    }),
    password: new FormControl('', { validators: [Validators.required] })
  });
}

or you can just initialize it in your class definition:

loginForm = new FormGroup({
  email: new FormControl('', {
    validators: [Validators.required, Validators.email]
  }),
  password: new FormControl('', { validators: [Validators.required] })
});

this isn't specifically related to FormGroup, it's a TypeScript setting that doesn't allow non nullable properties to not be defined either in the class definition or in the constructor.

if you don't like this setting, you can modify your tsconfig.json to include this in the compilerOptions:

"strictPropertyInitialization": false

this will allow you to not initialize properties in the constructor, but also won't warn you if you ever forget to do it. Only thing you really need to remember is that @Input() bindings aren't ready in the constructor, so don't try to use them when building a form. Use them to modify or set the value of the form after it's been built.

score 0 · Answer 2 · answered Mar 23 '21 at 16:18

Initialising the form in the class below sample example will resolve the issue. Then we can use with this operator.

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

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

  form = new FormGroup({
    name: new FormControl()
  });

  onSubmit(): void {
    console.log('Name:' + this.form.get('name').value);
  }
}

FormGroup initializaton issue

2 Answers2