FormGroup 已弃用

Question

我已经看到了一些相关的问题和答案，但不幸的是那些对我帮助不大。

ngOnInit(): void {
    this.form = this.fb.group({
      newPassword: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(12)]],
      confirmPassword: [''],
    }, {validators: this.checkPasswords(this.form)});
  }
  checkPasswords(group: FormGroup) {
    let pass = group.controls.password.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");
  }

我在 this.fb.group 中收到错误。我希望我的自定义验证器能够正常工作并在视图中显示错误消息，但我没有这样做。

谁能告诉我这个错误的实际含义以及如何轻松解决这个问题？

Answer 1

您用来创建 FormGroup 的重载已弃用。使用另一个重载来实现这一点，将形式 validators 作为 ValidatorFn | ValidatorFn[] 传递，或者只传递方法 this.checkPasswords 而无需调用它 this.checkPasswords(this.form) ，如下所示：

  ngOnInit(): void {
    this.form = this.fb.group(
      {
        newPassword: [
          '',
          [
            Validators.required,
            Validators.minLength(6),
            Validators.maxLength(12),
          ],
        ],
        confirmPassword: [''],
      },
      { validators: this.checkPasswords }
    );
  }

Answer 2

Amer 是正确的，重载已被弃用...特别是传递类型 [key: string]: any 的 options 参数的能力。下面提供了有关原因的官方 Angular 文档。

~~group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup~~

Deprecated This API is not typesafe and can result in issues with Closure Compiler renaming. Use the FormBuilder#group overload with AbstractControlOptions instead.

https://angular.io/api/forms/FormBuilder#group

您必须以接口的形式构造您的选项对象AbstractControlOptions

interface AbstractControlOptions {
  validators?: ValidatorFn | ValidatorFn[] | null
  asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null
  updateOn?: 'change' | 'blur' | 'submit'
}

https://angular.io/api/forms/AbstractControlOptions#abstractcontroloptions

Answer 3

好吧，我遇到了同样的问题，这里的答案并没有真正提供解决方案。所以这就是我的发现：

目前你有这个(group: FormGroup):

checkPasswords(group: FormGroup) {
    let pass = group.controls.password.value;
    let confirmPass = group.controls.confirmPassword.value;
    return pass === confirmPass ? null : { notSame: true }
  }

改成这个(group: AbstractControl):

checkPasswords(group: AbstractControl) {
    let pass = group.controls.password.value;
    let confirmPass = group.controls.confirmPassword.value;
    return pass === confirmPass ? null : { notSame: true }
  }

在没有已弃用警告的情况下，一切都将继续按原样运行。为什么会这样，它有什么意义，没有任何线索，但它确实有效。

FormGroup 已弃用

FormGroup is deprecated

formbuilder

typescript

angular

angular-reactive-forms

formgroups