Angular中如何避免TypedForms出现undefined类型

针对你遇到的问题，有几种简洁的解决方案：

1. 使用getRawValue()替代value #

Angular的FormGroup.value会考虑表单控件的状态（比如是否被禁用），而getRawValue()会返回所有控件的当前值，结合你设置的nonNullable: true，它的类型会严格匹配你定义的非空字符串：

// 类型为string，无需!或检查
const desc = this.form.getRawValue().description;

2. 显式指定FormGroup的泛型类型 #

给FormGroup明确声明泛型，约束其控件的类型，这样value的类型会自动推导为非空结构：

import { FormGroup, FormControl, Validators } from '@angular/forms';

readonly form = new FormGroup<{
  summary: FormControl<string>;
  description: FormControl<string>;
}>({
  summary: new FormControl<string>('', { nonNullable: true, validators: Validators.required }),
  description: new FormControl<string>('', { nonNullable: true, validators: Validators.required }),
});

// 此时this.form.value.description类型为string

3. 全局启用非空配置（可选） #

如果项目中大部分表单都需要非空控件，可以全局配置默认启用nonNullable，减少重复代码：

// 在main.ts中
import { bootstrapApplication } from '@angular/platform-browser';
import { provideNativeValidators } from '@angular/forms';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideNativeValidators({ nonNullable: true }),
    // 其他服务配置
  ],
});

全局配置后，新创建的FormControl默认会启用nonNullable: true，再结合显式的泛型定义，就能彻底解决类型问题。

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