Angular如何将表单模型抽离为独立函数并在ngOnInit中调用

直接把创建表单的逻辑抽成独立函数就行，步骤很简单：

1. 抽离表单创建逻辑到私有函数 #

新建一个返回FormGroup类型的私有方法，把原ngOnInit里的表单创建代码移进去：

private createMyForm(): FormGroup {
  return new FormGroup({
    name: new FormControl('Sammy'),
    email: new FormControl(''),
    message: new FormControl('')
  });
}

2. 在ngOnInit中调用该函数 #

在ngOnInit钩子内调用这个函数，将返回值赋值给myForm：

ngOnInit() {
  this.myForm = this.createMyForm();
}

完整修改后代码 #

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

export class AppComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = this.createMyForm();
  }

  private createMyForm(): FormGroup {
    return new FormGroup({
      name: new FormControl('Sammy'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }
}

这样调整后，表单的创建逻辑和初始化钩子的逻辑分开，后续修改表单字段、添加验证规则都可以直接在createMyForm()里操作，代码结构更清晰，也方便在其他场景（比如重置表单）重复调用这个函数。

内容的提问来源于stack exchange，提问作者Harsh Kadu