FormBuilder group is deprecated

by

Problem description

From the documentation we see two different lines with the group() function

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

AND

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

The 2nd definition is what is deprecated

The difference in this lines is options?: AbstractControlOptions and options: { [key: string]: any; }

To understand why angular is throwing this error we will now consider AbstractControlOptions

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

We continue to breakdown the problem by noting that the difference between this structure and your structure is ValidatorFn[]

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}

Overally, the error is thrown in your case because your Validator function is expected to take a control and return ValidationErrors | null. In the line validate(control: AbstractControl): void, your code actually returns void but expected to return a ValidationError | null

Solution

From the problem description, the solution is to simply modify the ValidatorFn

Ensure that your ValidatorFn returns a ValidationError or if no error returns null
From ValidationErrors defination

type ValidationErrors = {
    [key: string]: any;
};

You will need to return a key value pair object e.g {required_if: true}

We can change your code by adding return statements as expected

class ValidateThirdNumber {
  static validate(control: AbstractControl): ValidationErrors | null {
      if (control) {
      const isMultiFlavor = control.get('isMultiFlavor')?.value;
      const ingredientFlavor = control.get('ingredientFlavor')?.value;
      const ingredientBrand = control.get('ingredientBrand')?.value;
      const ingredientName = control.get('ingredientName')?.value;
      if (isMultiFlavor && ingredientFlavor.trim().length === 0) {
        control.get('ingredientFlavor')?.setErrors({required_if: true});
        return ({required_if: true});
      } else {
        control.get('ingredientFlavor')?.setErrors(null);
      }
      if (!ingredientFlavor && !ingredientBrand && !ingredientName) {
        control.get('ingredientName')?.setErrors({required_at_least: true});
        control.get('ingredientFlavor')?.setErrors({required_at_least: true});
        control.get('ingredientBrand')?.setErrors({required_at_least: true});
        return ({required_at_least: true});
      } else {
        control.get('ingredientName')?.setErrors(null);
        control.get('ingredientFlavor')?.setErrors(null);
        control.get('ingredientBrand')?.setErrors(null);
      }
      if (ingredientBrand && ingredientName && ingredientName === ingredientBrand) {
        control.get('ingredientName')?.setErrors({not_the_same: true});
        control.get('ingredientBrand')?.setErrors({not_the_same: true});
        return ({not_the_same: true});
      }
    }
    return null;
  }
}

More Related Contents:

  1. Angular2 – FormControl Validation on blur
  2. Dynamically add event listener
  3. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  4. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  5. Use component from another module
  6. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  7. Angular and Typescript: Can’t find names – Error: cannot find name
  8. Angular 2 Scroll to top on Route Change
  9. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  10. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  11. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  12. async/await in Angular `ngOnInit`
  13. How to inject service into class (not component)
  14. Emit event from parent to child
  15. Angular2 router keep query string
  16. Angular 2 ‘component’ is not a known element
  17. How to make a sequence of http requests in Angular 6 using RxJS
  18. How to set unique template reference variables inside an *ngFor? (Angular)
  19. Getting Image from API in Angular 4/5+?
  20. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  21. Angular 4 HttpClient Query Parameters
  22. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  23. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  24. Type casting within a template in Angular 2
  25. How to Using a FormArray in a FormGroup
  26. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  27. How to validate white spaces/empty spaces? [Angular 2]
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment