Angular form custom validator on two fields

Question

I have question how to valid on two fields simultaneously in Angular FormGroup. I must create custom validation on value return backend I don't have any idea how to create it. Thanks for any idea.

You build a Validator for the FormGroup as opposed to for the FormControl. That allows you to check whether both fields are valid before validating the overall FormGroup. — Will Alexander
– Will Alexander, Commented May 19, 2022 at 13:30
You can use the same validator for each of them. From what your write, I can suggest you use AsyncValidator — Shifenis
– Shifenis, Commented May 19, 2022 at 13:31
I'll add that i must two value for at the same time, to check validation. — serob
– serob, Commented May 19, 2022 at 13:35

Yan Koshelev · Accepted Answer · 2022-05-19 20:08:58Z

1

You need to create AsyncValidator and bind it to the FormGroup, then you will have access to the group fields and can validate two fields in one validation tick. There is some example for you:

group = new FormGroup(
    {
      a: new FormControl(''),
      b: new FormControl(''),
    },
    { asyncValidators: customAsyncValidator() }
  );


function customAsyncValidator(): AsyncValidatorFn {
  return (group: FormGroup) => {
    const a = group.get('a').value;
    const b = group.get('b').value;
    return of('value').pipe(
      delay(500),
      map((value) => (value === a || value === b ? null : { fields: true }))
    );
  };
}

Hope this helps. Stackblitz

answered May 19, 2022 at 20:08

Yan Koshelev

1,1291 gold badge7 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Angular form custom validator on two fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related