为什么我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 反应形式？

Question

如所述，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"
    });
  }
}

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

Answer 1

我相信这是因为构造函数中的 create Form 方法将在 ngOninit 之前执行，并且您的表单将在您的组件呈现后立即可供使用。

Answer 2

初始化 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: [''],
    });
  }
}

Answer 3

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

为什么我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 反应形式？

Why should I create my Angular2 reactive form in the constructor instead of ngOnInit?

constructor

angular2-forms

angular