Angular 14：如何指定表单控件值不为undefined？

你已经给SearchBox设置了{nonNullable: true}，但TypeScript仍判定其value为string | undefined，核心原因是FormGroup默认不会自动推断子控件的非空类型。直接用!属于类型断言，虽能暂时解决问题，但并非最优方案——它跳过了TypeScript的类型检查，存在运行时出错风险。以下是更安全、优雅的解决方式：

1. 给FormGroup指定明确的泛型类型 #

通过手动定义FormGroup的泛型结构，让TypeScript准确识别子控件的非空类型：

// 方式一：给FormGroup整体设置nonNullable选项
searchForm = new FormGroup({
  SearchBox: new FormControl<string>('', {nonNullable: true})
}, { nonNullable: true });

// 方式二：精准定义FormGroup的泛型结构
searchForm = new FormGroup<{ SearchBox: string }>({
  SearchBox: new FormControl<string>('', {nonNullable: true})
});

之后直接通过this.searchForm.value.SearchBox取值时，类型会被推断为string，无需额外断言。

2. 使用getRawValue()方法 #

FormGroup的value属性会忽略禁用控件的值，而getRawValue()会返回所有控件的原始值，对于标记为非空的控件，它会直接返回明确的非空类型：

this.Query = this.searchForm.getRawValue().SearchBox;

3. 单独定义FormControl引用 #

将子控件单独定义为类成员，再加入FormGroup，这样可以直接引用控件实例取值，类型更清晰：

// 单独定义非空控件
private readonly searchBoxControl = new FormControl<string>('', {nonNullable: true});

// 组装进FormGroup
searchForm = new FormGroup({
  SearchBox: this.searchBoxControl
});

// 直接通过控件实例取值
this.Query = this.searchBoxControl.value;

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