开启StrictNullChecks后Angular FormGroup值映射可选参数的优化方法

方案一：使用FormBuilder的nonNullable配置（Angular 14+） #

Angular 14及以上版本支持通过nonNullable选项控制FormControl的类型范围，避免自动注入null类型。初始化表单时明确指定控件类型为SearchFilterCode | undefined，并关闭非空约束：

import { FormBuilder } from '@angular/forms';

// 组件内初始化表单
constructor(private fb: FormBuilder) {}

filterGroup = this.fb.group({
  group: this.fb.control<SearchFilterCode | undefined>(undefined, { nonNullable: false }),
  name: this.fb.control<SearchFilterCode | undefined>(undefined, { nonNullable: false }),
  shift: this.fb.control<SearchFilterCode | undefined>(undefined, { nonNullable: false })
});

这样filterGroup.value的类型会严格匹配你定义的接口结构，不会包含null，直接赋值给SearchCriteria的filters字段即可。

方案二：给FormGroup指定精确的类型约束 #

直接为FormGroup定义与接口filters完全匹配的类型，覆盖默认的表单值类型：

// 定义与接口filters结构一致的表单值类型
type FilterFormValue = {
  group?: SearchFilterCode;
  name?: SearchFilterCode;
  shift?: SearchFilterCode;
};

// 初始化FormGroup时指定类型
filterGroup = new FormGroup<FilterFormValue>({
  group: new FormControl<SearchFilterCode | undefined>(undefined),
  name: new FormControl<SearchFilterCode | undefined>(undefined),
  shift: new FormControl<SearchFilterCode | undefined>(undefined)
});

此时filterGroup.value的类型就是FilterFormValue，与SearchCriteria['filters']类型完全兼容，赋值时不会出现类型错误。

方案三：安全的类型断言（谨慎使用） #

如果你能确保表单控件实际运行时不会返回null值，可以使用类型断言强制转换类型：

const obj: SearchCriteria = {
  locationID: 'abcdefg',
  filters: this.filterGroup.value as {
    group?: SearchFilterCode;
    name?: SearchFilterCode;
    shift?: SearchFilterCode;
  }
};

注意：这种方式跳过了TypeScript的类型检查，仅在你能明确控制表单值不会出现null时使用。

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