Angular Validators on Object Members in Reactive Form

Question

We have an Angular Reactive Formbuilder

this.formBuilderGroup({
  'productType':['',[Validators.required, Validators.min(3)]],
  'deliveryCategory':['',[Validators.required, Validators.max(8)]]
})

They are actually driven from Material select dropdowns, and give Dto Objects. How do I have validators on actual Object members within?

such as productType.productTypeId Validator min is 1.

and deliveryCategory.deliveryCategoryNo min 1?

Validators.min is currently only on whole object.

How can I write custom Validator that will take object as object member as parameters? Or is there more optimal way?

Whatever the [value] of the select is is what will get the validation rule. It's not the whole object. Can you create a StackBlitz? — mwilson
– mwilson, Commented Mar 18, 2020 at 19:36

Michał Stochmal · Accepted Answer · 2023-04-25 11:03:01Z

2

This needs a custom validator, which can be written like this:

// pass in property to validate and list of validators to run on it
export function validateProperty(property: string, validators: ValidatorFn[]): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // get the value and assign it to a new form control
    const propertyVal = control.value && control.value[property];
    const newFc = new FormControl(propertyVal);
    // run the validators on the new control and keep the ones that fail
    const failedValidators = validators.map(v => v(newFc)).filter(v => !!v);
    // if any fail, return the list of failures, else valid
    return failedValidators.length ? {invalidProperty: failedValidators} : null;
  };
}

usage:

'productType':['', validateProperty('propertyToValidate', [Validators.required, Validators.min(3)])],

edited Apr 25, 2023 at 11:03

Michał Stochmal

6,7514 gold badges40 silver badges45 bronze badges

answered Mar 18, 2020 at 19:55

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Shirley · Accepted Answer · 2022-06-14 11:36:18Z

1

the function signature of the accepted solution should be..

validateProperty(property: string, validators: ValidatorFn[]): ValidatorFn

answered Jun 14, 2022 at 11:36

Ben Shirley

111 bronze badge

Comments

Andres Kiik · Accepted Answer · 2024-03-05 12:01:58Z

0

If you want to return the validation errors structure just like Angular does it.

export function validateProperty(property: string, validators: ValidatorFn[]): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const propertyVal = control.value && control.value[property];
    const propertyControl = new FormControl(propertyVal);
    const errors = validators.map(v => v(propertyControl))
      .filter(v => !!v)
      .reduce((a, v) => ({ ...a, ...v}), {});

    return Object.keys(errors).length ? errors : null;
  };
};

answered Mar 5, 2024 at 12:01

Andres Kiik

563 bronze badges

Collectives™ on Stack Overflow

Angular Validators on Object Members in Reactive Form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related