Angular FormGroup已废弃报错 自定义密码校验器不生效如何解决？

• FormGroup废弃警告的本质：Angular v14及以上版本中，FormBuilder.group()的旧重载签名被标记为废弃，你当前的传参方式没有明确将自定义校验器归入validators配置项，不符合新的类型规范，因此触发废弃提示。
• 你的代码还存在两处核心问题，是自定义校验器无法正常工作的根本原因：
  1. 调用this.fb.group时，this.form还未完成初始化，你主动传入this.checkPasswords(this.form)相当于给校验器传入了undefined，校验逻辑无法正常执行
  2. 自定义校验器中读取的控件名是password，但你实际定义的密码控件名为newPassword，字段不匹配导致永远无法读取到正确的密码值

修正后的Typescript逻辑如下：

ngOnInit(): void {
    this.form = this.fb.group({
      newPassword: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(12)]],
      confirmPassword: [''],
    }, {
      // 明确指定validators配置项，直接传校验器函数引用，不需要手动调用传参
      validators: [this.checkPasswords]
    });
  }
  checkPasswords(group: FormGroup) {
    // 修正控件名为你实际定义的newPassword
    let pass = group.controls.newPassword.value;
    let confirmPass = group.controls.confirmPassword.value;
    return pass === confirmPass ? null : { notSame: true }
  }
  get newPassword() {
    return this.form.get("newPassword");
  }
  get confirmPassword() {
    return this.form.get("confirmPassword");
  }

跨字段校验的错误会挂载在FormGroup实例上，直接从form对象读取即可：

<form [formGroup]="form">
  <div>
    <label>新密码</label>
    <input type="password" formControlName="newPassword">
    <span *ngIf="newPassword?.invalid && (newPassword?.dirty || newPassword?.touched)">
      <span *ngIf="newPassword?.errors?.['required']">请输入密码</span>
      <span *ngIf="newPassword?.errors?.['minlength'] || newPassword?.errors?.['maxlength']">密码长度需为6-12位</span>
    </span>
  </div>
  <div>
    <label>确认密码</label>
    <input type="password" formControlName="confirmPassword">
    <span *ngIf="form.errors?.['notSame'] && (confirmPassword?.dirty || confirmPassword?.touched)">
      两次输入的密码不一致
    </span>
  </div>
</form>

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