FormGroup 初始化问题答案

【问题标题】：FormGroup initializaton issueFormGroup 初始化问题
【发布时间】：2021-03-23 16:02:58
【问题描述】：

在尝试使用如下所示的登录表单运行 Angular 应用程序时，它会引发错误：

src/app/pages/auth/login/login.component.ts:12:3 - 错误 TS2564：属性“loginForm”没有初始化程序，也没有明确分配在构造函数中。

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...");
  }

}

有谁知道初始化 FormGroup 的正确方法是什么？

【问题讨论】：

这个问题也适合我，我将 formGroup 初始化移到构造函数并工作。
form: FormGroup = new FormGroup({ ....}) 这将解决问题。之后使用this.form
这能回答你的问题吗？ Property '...' has no initializer and is not definitely assigned in the constructor

标签： angular

【解决方案1】：

在构造函数中执行，根据错误消息：

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

或者你可以在你的类定义中初始化它：

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

这与FormGroup 无关，它是一个 TypeScript 设置，不允许在类定义或构造函数中定义不可为空的属性。

如果您不喜欢此设置，您可以修改您的 tsconfig.json 以将其包含在 compilerOptions 中：

"strictPropertyInitialization": false

这将允许您不初始化构造函数中的属性，但如果您忘记这样做也不会警告您。您真正需要记住的唯一一件事是 @Input() 绑定在构造函数中尚未准备好，因此在构建表单时不要尝试使用它们。使用它们在表单构建后修改或设置表单的值。

【讨论】：

【解决方案2】：

在下面的示例类中初始化表单将解决该问题。然后我们可以使用 this 运算符。

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);
  }
}

【讨论】：