Angular中如何将FormBuilder表单配置抽离到独立.ts文件引入使用

1. 新建独立表单配置文件 #

首先在项目对应目录下新建 complaint-form.config.ts 文件，写入如下内容：

import { Validators } from '@angular/forms';

// 导出静态表单配置常量
export const COMPLAINT_FORM_CONFIG = {
  ComplaintID: ['', [Validators.required]],
  FileNo: ['', [Validators.required]],
  ComplaintName: ['', Validators.required],
};

// 可选导出：表单值类型，方便后续对表单操作做类型约束
export type ComplaintFormType = typeof COMPLAINT_FORM_CONFIG;

2. 调整原组件代码引入配置 #

修改 ComplaintCreateComponent.ts 内容如下：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
// 引入上一步导出的表单配置，路径根据你的实际文件存放位置调整
import { COMPLAINT_FORM_CONFIG } from './complaint-form.config';

...

export class ComplaintCreateComponent implements OnInit {
  // 直接将引入的配置作为入参传给 formBuilder.group 方法即可
  public ComplaintForm = this.formBuilder.group(COMPLAINT_FORM_CONFIG);
  
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {}

  onSubmit() {
    console.log(this.ComplaintForm);
  }

}

抽离完成后后续调整表单默认值、校验规则时，只需要修改配置文件即可，无需改动组件业务逻辑，降低耦合度更低更便于维护。

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