Angular 14升级后valueChanges类型错误（TypeScript严格模式下）

问题原因 #

你的代码存在两个类型相关问题：

1. fb.nonNullable.group中控件的初始化写法，导致TypeScript错误推断country/area的类型为string | { validators: ((control: AbstractControl<any, any>) => ValidationErrors | null)[]; }，这是因为传入的数组结构未符合Angular 14类型化表单的严格类型要求。
2. form.get('country')返回的是泛型AbstractControl，其value类型不够明确，无法直接匹配checkCountry所需的string类型。

具体解决方案 #

1. 修正FormBuilder控件配置写法 #

Angular 14的非Nullable表单组对控件配置的类型推断要求更严格，你可以通过两种方式修正：

方式一：明确初始值类型

form = this.fb.nonNullable.group({
    // 用as string强制指定初始值类型，让TS正确推断控件value类型
    country: ["" as string, { validators: [Validators.required] }],
    area: ["" as string, { validators: [Validators.required] }]
});

方式二：使用fb.nonNullable.control定义控件（推荐）

直接用非Nullable控件构造函数创建，类型推断更精准：

form = this.fb.nonNullable.group({
    country: this.fb.nonNullable.control("", { validators: [Validators.required] }),
    area: this.fb.nonNullable.control("", { validators: [Validators.required] })
});

2. 解决valueChanges的类型匹配问题 #

有两种方式确保value类型为string：

方式一：类型断言

将获取到的控件断言为明确类型的FormControl：

(this.form.get('country') as FormControl<string>).valueChanges.subscribe(value => {
  checkCountry(value); // 此时value类型为string，符合函数参数要求
});

方式二：使用类型化表单组（推荐）

先定义表单数据模型接口，让表单组的类型完全明确：

// 定义表单数据结构接口
interface FormModel {
  country: string;
  area: string;
}

// 创建带类型约束的非Nullable表单组
form = this.fb.nonNullable.group<FormModel>({
    country: ["", { validators: [Validators.required] }],
    area: ["", { validators: [Validators.required] }]
});

// 此时get方法返回的控件类型自动匹配接口定义
this.form.get('country')?.valueChanges.subscribe(value => {
  checkCountry(value); // value自动推断为string，无类型错误
});

更优实现方式 #

推荐采用类型化表单组+直接访问控件实例的组合，全程获得完整类型校验：

interface FormModel {
  country: string;
  area: string;
}

form = this.fb.nonNullable.group<FormModel>({
    country: this.fb.nonNullable.control("", { validators: [Validators.required] }),
    area: this.fb.nonNullable.control("", { validators: [Validators.required] })
});

// 直接通过form.controls访问控件，类型完全明确，无需额外断言
this.form.controls.country.valueChanges.subscribe(value => {
  checkCountry(value);
});

这种写法不仅解决当前类型错误，还能在开发过程中提供精准的代码提示，完全适配TypeScript严格模式的要求。

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