为啥我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 响应式表单？

Posted 2023-03-13

【中文标题】为啥我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 响应式表单？

【英文标题】：Why should I create my Angular2 reactive form in the constructor instead of ngOnInit?为什么我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 响应式表单？

【发布时间】：2017-09-21 08:20:06

【问题描述】：

如other responses 中所述，Angular2 应用程序的初始例程应在 ngOnInit() 方法中启动，而将构造函数专门用于依赖注入。

但是，在我关注的Reactive Forms tutorial 中，表单的初始化是在构造函数中：

export class HeroDetailComponent3 
  heroForm: FormGroup; // <--- heroForm is of type FormGroup

  constructor(private fb: FormBuilder)  // <--- inject FormBuilder
    this.createForm();
  

  createForm() 
    this.heroForm = this.fb.group(
      name: '', // <--- the FormControl called "name"
    );
  

真的有显着差异还是只是一个小问题？

【问题讨论】：

再次打开一个 PR 角度文档项目。

【参考方案1】：

在ngOnInit() 中初始化formGroup 并不是一个坏习惯，因为如果您希望使用（直接或间接）依赖于组件@Input()s 的值来初始化表单，这实际上是必需的。

例如：

class SignInFormComponent 
  @Input() currentLogin: string;
  formGroup: FormGroup;

  constructor(private fb: FormBuilder) 
    // this.currentLogin is not known yet here
  

  ngOnInit(): void 
    this.formGroup = this.fb.group(
      loginEmail: [this.currentLogin, Validators.email],
      loginPassword: [''],
    );
  

【参考方案2】：

取决于您的具体用例和设计。您可能会遇到与 get 方法相关的问题，您的其他一些 formControls 可能依赖这些方法。您可能会受益于在构造函数中创建表单，并且您的表单将在组件渲染后立即准备就绪。但是，如果您需要在某些formControls 的表单上执行subscribe 到.valueChanges，您可能会遇到时间问题。你不能建立你的依赖formControls，除非你.subscribe，你不能.subscribe，直到表单被初始化。你可能会遇到error: cannot read property 'get' of undefined。

【参考方案3】：

我相信这是因为构造函数中的 createForm 方法将在 ngOninit 之前执行，并且您的表单将在您的组件渲染后立即准备好使用。