Angular FormBuilder group is deprecated [duplicate]

Question

I saw there is a topic which looks like mine but it doesn't really answer my problem because we don't manage the errors in the same way. FormBuilder group is deprecated

First of all, I just migrated to Angular 11 and I have this problem now:

group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.

In this page I generate automatically many forms on my page and in the case of a date range I use two datepickers. I created a function for checking the values in the 2 date pickers.

Component:

newGroup = this.fb.group(
        {
          [node.type + '_' + node.objectId + '_dateFrom']: [
            '',
            [Validators.required]
          ],
          [node.type + '_' + node.objectId + '_dateTo']: [
            '',
            [Validators.required]
          ]
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        }
      );

Validator:

export function CheckFromToDate(fromName: string, toName: string) {
  return (formGroup: FormGroup) => {
    const from = formGroup.controls[fromName];
    const to = formGroup.controls[toName];
    const dateFrom = new Date(from.value);
    const dateTo = new Date(to.value);
    const today = new Date();
    if (to.errors && from.errors) {
      // return if another validator has already found an error on the matchingControl
      return;
    }
    if (!from.value) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (!to.value) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateFrom.getTime() < -3600000) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (dateFrom > today) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (dateTo.getTime() < -3600000) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateTo > today) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateFrom.getTime() > dateTo.getTime()) {
      from.setErrors({ fromTo: true });
      to.setErrors({ fromTo: true });
    } else {
      from.setErrors(null);
      to.setErrors(null);
    }
  };
}

How can I make my validators work with the new way of handling validators in Angular 11?

Answer 1

Change your validator signature from

return (formGroup: FormGroup) 

to

return (controls: AbstractControl) 

Then change the way you access the controls from

const from = formGroup.controls[fromName];

to

const from= controls.get(fromName);

Also change the way you report the errors back from

from.setErrors({ wrongDate: true });

to

return from.setErrors({ wrongDate: true }); // note the return statement.

One final change would be to change

newGroup = this.fb.group(
        {
           ...
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        }
      );

to

newGroup = this.fb.group(
        {
           ...
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        } as AbstractControlOptions
      );

Note the casting to AbstractControlOptions and that should remove the deprecated warning.

You can refer the official documentation for a detailed explanation.