ng14 中具有强类型表单的 FormBuilder

Question

我有以下表格：

const enum Fields {
  FirstName = 'firstName',
  LastName = 'lastName'
}

interface FormType {
  [Fields.FirstName]: FormControl<string | null>;
  [Fields.LastName]: FormControl<string | null>;
}

public form!: FormGroup<FormType>;

this.form = new FormGroup({
  [Fields.FirstName]: new FormControl(null, { validators: Validators.required }),
  [Fields.LastName]: new FormControl(null, { validators: Validators.required }),
});

使用enum是我为了避免打错而养成的习惯。

当我执行 this.form.getRawValue().firstName 时，firstName 的类型被正确定义为 string | null。但是，我更喜欢使用 FormBuilder 来构建我的表单，但是我找不到使用 FormBuilder 来翻译上面的表单的方法。我试过这个：

this.form = this._fb.group<FormType>({
  [Fields.FirstName]: ['', Validators.required],
  [Fields.LastName]: ['', Validators.required],
});

我当然可以使用一个没有任何类型的简单 FormGroup 但它会破坏目的 :p

然而，这甚至不能用作 string | Validators 的推断类型。我尝试了不同的方法但没有成功。

是否可以将 FormBuilder 与强类型表单一起使用？

Answer 1

对于 Formbuilder，您可以提供原始值、控件或装箱值，系统会自动推断类型。

this.form = this._fb.group({
  [Fields.FirstName]: ['', Validators.required],
  [Fields.LastName]: ['', Validators.required],
});

this.form.value //value: Partial<{firstName: string | null;lastName: string | null;}>

ng14 中具有强类型表单的 FormBuilder

FormBuilder with strongly typed form in ng14

formbuilder

angular

angular-reactive-forms

angular14