Angular ng14中具有强类型表单的FormBuilder

发布于06月05日

我有以下表格:

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，但它会 destruct 目的:p

但是，这甚至不能作为string | Validators的推断类型.我try 了不同的事情，但没有成功.

是否可以将FormBuilder用于强类型表单？

this.form = this.fb.group<FormType>({ [Fields.FirstName]: this.fb.control('', Validators.required), [Fields.LastName]: this.fb.control('', Validators.required), }); this.form.value //value: Partial<{firstName: string | null;lastName: string | null;}>

Angular ng14中具有强类型表单的FormBuilder

推荐答案

Angular相关问答推荐

Goto锚定在嵌套容器中，具有溢出自动

为什么这个拦截器只在发送事件上触发，而不是在实际响应上触发？

如何在HTML外部项目中使用Web组件(以17角创建)

以Angular 将指令事件从子组件传递到父组件

在Angular 17独立模式下，如何使用Swiper 11.0.5版使Bootstrap下拉菜单在Swiper元素外部可见

Angular 17-getEnvironment InjectorProviders出现异常

无法在Mat-SideNav中绑定模式

VS代码中带Angular 17的缩进新控制流

对REST后端的Angular/Priming过滤器请求导致无限循环

我的验证器收到一个始终为空的可观察值

Chart.js 如何编辑标题标签 colored颜色

为什么 AngularFire .set() 永远等待响应并且不继续？

如何设置Angular 4背景图片？

如何在Angular2中基于特定的构建环境注入不同的服务？

在 Angular 中动态设置样式

如何使用 CLI 创建特定版本的 Angular 项目？

angular4的所见即所得编辑器

Angular Material2 主题 - 如何设置应用程序背景？

如何从materialAngular使用分页器？

为什么 Angular 项目中没有 Angular-CLI 为 model生成命令？