FormGroup is deprecated

Issue

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

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

Answered By - Amer