'FormGroup is deprecated

I've already seen some related question & answers, but unfortunately those didn't help me much.

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");
  }

I'm getting the error in this.fb.group this point. I want my custom validator work & also show error message in the view but I failed to do so.

Can anyone please tell what this error actually means & how to fix this easily?

Solution 1:^[1]

The overload that you're using to create a FormGroup is deprecated. Use another overload to achieve that, passing the form validators as ValidatorFn | ValidatorFn[] or just by passing the method this.checkPasswords without calling it this.checkPasswords(this.form) like the following:

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

Solution 2:^[2]

Alright so I had the same issue and the answers here don't really provide a solution. So here's what I found:

Currently you have this (group: FormGroup):

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

Change it to this (group: AbstractControl):

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

Everything will continue to work as is without the deprecated warning. Why is that the case and how does it make sense, no clue, but it works.

Solution 3:^[3]

Amer is correct, the overload is deprecated... specifically the ability to pass the options argument of type [key: string]: any. Below is providing official Angular documentation on why.

~~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

You must construct your options object in the shape of interface AbstractControlOptions

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Amer
Solution 2	WhoIsCarlo
Solution 3	Marshal

'FormGroup is deprecated

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]