Angular 16中ReactiveFormsModule使用报错问题咨询

一、Validators.compose相关的类型错误 #

报错原因 #

1. 自定义验证器类型不匹配：Angular 14+对ValidatorFn的类型约束更严格，自定义验证器的参数必须是AbstractControl<any, any>，而你的PasswordValidator.cannotContainSpace接收的是FormControl，导致类型不兼容。
2. Validators.compose已废弃：新版本Angular中，Validators.compose已被标记为废弃，直接传递验证器数组即可，无需用该方法包裹。

修改方式 #

1. 修正自定义验证器的参数类型：

// 修改PasswordValidator的cannotContainSpace方法
export class PasswordValidator {
  static cannotContainSpace(control: AbstractControl<any, any>): ValidationErrors | null {
    if ((control.value as string)?.includes(' ')) {
      return { cannotContainSpace: true };
    }
    return null;
  }
}

2. 移除Validators.compose，直接传验证器数组：

constructor(fb: FormBuilder, private _loginService: LoginService){
  this.form = fb.group({
    username: ['', Validators.required],
    password: ['', [Validators.required, PasswordValidator.cannotContainSpace]]
  });
}

二、HTML模板中表单控件访问报错 #

报错原因 #

Angular 16默认启用了更严格的类型检查，FormGroup的controls属性现在是索引签名类型，不再支持点语法（.）访问；同理errors对象也是索引签名，必须用方括号（[]）访问属性。

修改方式 #

方式1：改用方括号访问（快速修复）

把模板中的点语法替换为方括号，并添加可选链避免null报错：

<div *ngIf="form.controls['password'].errors?.['required']" class="alert alert-danger">
  密码不能为空
</div>

方式2：为FormGroup定义明确的类型（更规范）

定义表单结构接口，创建FormGroup时指定类型，即可继续使用点语法：

// 定义表单接口
interface LoginForm {
  username: FormControl<string>;
  password: FormControl<string>;
}

// 在组件中指定类型
constructor(fb: FormBuilder, private _loginService: LoginService){
  this.form = fb.group<LoginForm>({
    username: ['', Validators.required],
    password: ['', [Validators.required, PasswordValidator.cannotContainSpace]]
  });
}

此时模板可继续使用点语法：

<div *ngIf="form.controls.password.errors?.required" class="alert alert-danger">
  密码不能为空
</div>

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