Angular 16 中的反应式表单类型-解网

问：

你能帮我举个例子，用formBuilder将数据模型应用于反应式表单吗？我已经用formGroup完成了它，它起作用了，但是我无法用formBuilder做同样的事情。

这是我尝试通过formBuilder返回formGroup的函数。

public brandingFormControl() {
    return this._fb.group<FormBrand>({
        brand: ['', {validators: [Validators.required], nonNullable: true}],
        body_font: ['', {validators: [Validators.required], nonNullable: true}],
        body_color_font: ['', {validators: [Validators.required], nonNullable: true}],
    })
};

我的界面：

interface FormBrand {
    brand: FormControl<string>;
    body_font: FormControl<string>;
    body_color_font: FormControl<string>;
}

我得到的错误是这样的。

TS2740: Type
(string | {     
    validators: ((control: AbstractControl<any, any>) => ValidationErrors | null)[];
    nonNullable: true;
})[] 
is missing the following properties from type FormControl<string> :  defaultValue, setValue, patchValue, reset , and  56  more.
form-workflow.service.ts(127, 5): The expected type comes from property  brand  which is declared here on type  FormBrand

我希望你能帮助我举个例子，说明如何使用formBuilder将数据类型插入到反应式表单中。

Angular TypeScript 验证类型

public brandingFormControl() {
    return this._fb.group<FormBrand>({
        brand: this._fb.control('', {validators: [Validators.required], nonNullable: true}),
        body_font: this._fb.control('', {validators: [Validators.required], nonNullable: true}),
        body_color_font: this._fb.control('', {validators: [Validators.required], nonNullable: true}),
    })
};

1赞 Rashmi Yadav 10/26/2023 #2

像这样修改你的界面：

interface FormBrand {
    brand: string;
    body_font: string;
    body_color_font: string;
}

=> 在 FormBrand 接口中，我们将类型指定为纯字符串，而不是 FormControl。此接口定义表单数据的预期结构。

=> 使用 FormBuilder 创建 FormGroup 时，我们使用 FormBrand 接口作为类型参数，以确保类型安全并匹配接口中定义的结构。

并像这样修改你的方法：

public brandingFormControl() {
    return this._fb.group<FormBrand>({
        brand: ['', [Validators.required]],
        body_font: ['', [Validators.required]],
        body_color_font: ['', [Validators.required]],
    });
}

=> 我们使用带有 [Validators.required] 的数组为每个表单控件指定验证。

它会起作用的！

上一个：Angular Kendo 网格反应式网格编辑添加行状态更改订阅在模糊时未触发

下一个：日期选择器的 Angular 材料手动日期更新无法正常工作

Angular 16 中的反应式表单类型

Reactive form typing in Angular 16

评论