使用 FormBuilder 来生成表单控件

FormBuilder 服务提供了一些便捷方法来生成表单控件。

FormBuilder在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。 下面会重构 ProfileEditor 组件，用FormBuilder 来代替手工创建这些 FormControl 和 FormGroup。

 Step 1 - 导入 FormBuilder 类

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

 

Step 2 - 注入FormBuild 服务

constructor(private fb: FormBuilder) { }

Step 3- 生成表单控件

FormBuilder 服务有三个方法：control()、group() 和 array()。这些方法都是工厂方法，用于在组件类中分别生成
FormControl、FormGroup 和 FormArray。

你可以使用 group() 方法，用和前面一样的名字来定义这些属性。这里，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值。你可以只使用初始值来定义控件，但是如果你的控件还需要同步或异步验证器，那就在这个数组中的第二项和第三项提供同步和异步验证器。

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
 
@Component({
  selector: 'app-accounting-subject-dialog',
  templateUrl: './app-accounting-subject-dialog.html',
  styleUrls: ['./app-accounting-subject-dialog.css']
})
export class ProfileEditorComponent {
  form: FormGroup;

  constructor(
        private i18n: TranslateService,
        private fb: FormBuilder,
        private metisService: MetisService,
        @Inject(MAT_DIALOG_DATA) private data: { type: AccountingBusinessType, isEdit: boolean, node?: NzTreeNode, expandDataCache },
        private dialogRef: MatDialogRef<AccountingSubjectDialogComponent>,
    ) {
      this.form = this.fb.group({
            status: [false],
            id: [null],
            code: [null, [
                    Validators.required, Validators.pattern(/^\d+$/), this.numberLengthValidator(level),
                    this.checkCodeRepeatValidator()
                ]], // 科目编码
            name: [null, Validators.required], // 科目名称
            parentName: [null], // 父级
            type: [null, Validators.required], // 科目类别
            term: [null], // 报送周期
            interCode: [null], // 内部机构号
            accountingType: [this.accountingType.DEBIT], // 余额方向
        }); });

  }
}