Angular类型化表单组如何声明所有字段为非可选

Angular 14起响应式表单默认启用严格类型化（Typed Forms），但form.value会被推断为Partial<表单值类型>，导致和服务端要求的必填参数类型不匹配，每次强制类型转换又很繁琐。以下是几种无需强制转换的解决方案：

方案一：使用getRawValue()替代form.value #

FormGroup.getRawValue()会返回所有表单控件的当前值（包括禁用控件），其类型为完整的表单值类型而非Partial，完全匹配服务端的参数要求：

submit() {
  this.authenticationService.login(this.form.getRawValue()).subscribe();
}

这个方案最简单直接，适合表单无禁用控件或需要包含禁用控件值的场景。

方案二：使用NonNullableFormBuilder创建表单 #

Angular提供的NonNullableFormBuilder会创建默认非空的表单控件，对应的form.value类型会自动是完整的必填类型，无需额外处理：

1. 注入NonNullableFormBuilder：

constructor(private fb: NonNullableFormBuilder) {}

2. 创建表单：

form = this.fb.group({
  username: ['', [Validators.required]],
  password: ['', [Validators.required]],
  rememberMe: [true]
});

此时form.value的类型就是{ username: string; password: string; rememberMe: boolean }，直接传给服务端即可。

方案三：手动指定FormGroup类型并结合表单验证 #

如果不想替换FormBuilder，可以手动声明FormGroup的类型，并利用表单验证通过的类型守卫来确保值的完整性：

// 定义表单值类型
type LoginFormValue = { username: string; password: string; rememberMe: boolean };

// 手动指定FormGroup的类型
form: FormGroup<{
  username: FormControl<string>;
  password: FormControl<string>;
  rememberMe: FormControl<boolean>;
}> = this.fb.group({
  username: ['', [Validators.required]],
  password: ['', [Validators.required]],
  rememberMe: [true]
});

submit() {
  // 表单验证通过时，必填字段肯定有值，可安全传递
  if (this.form.valid) {
    this.authenticationService.login(this.form.value as LoginFormValue).subscribe();
  }
}

不过这种方案仍需一次类型断言，优先级低于前两种。

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