How do validate multiple fields as one in Angular?

Question

I'm building an Angular 5 form. I have a requirement for contact information on my form (email or phone). Either an email address OR a phone number is required, but not both. How would I create a custom validator for this scenario? From the docs it seems that validators are responsible for just one control, whereas my validator would need to be aware of multiple controls to check all their values.

ngOnInit() {
   this.form = this.formBuilder.group({
       'name': [null, [Validators.required]],
       'email': [null, []], // A user can provide email OR phone, but
       'phone': [null, []], // both are not required. How would you do this?
   });
}

You'd use the same custom validator for each, but you'd use a reference to each control and return true if one or the other was used. Here's a good example: stackoverflow.com/questions/43487413/… that uses the same idea to validate a password. Still, two form controls are checked to create a group validator. — Z. Bagley
– Z. Bagley, Commented Dec 23, 2017 at 2:01
not completely working yet, try to enhance this: stackblitz.com/edit/angular-9effym?file=app%2Fapp.component.ts — HDJEMAI
– HDJEMAI, Commented Dec 23, 2017 at 4:54

Daniel C. · Accepted Answer · 2017-12-23 13:51:38Z

10

One possible solution is declaring a function that takes as an argument the form itself, for example:

    export function emailAndPhone() {
      return (form: FormGroup): {[key: string]: any} => {
        return (form.value.phone && form.value.email) ||
               (!form.value.phone && !form.value.email) 
                  ? { emailAndPhoneError : true } 
                  : null;
      };
    }

Set the validator function to your form definition using the validator extras:

ngOnInit() {
   this.form = this.formBuilder.group({
       'name': [null, [Validators.required]],
       'email': [null, []], // A user can provide email OR phone, but
       'phone': [null, []], // both are not required. How would you do this?
   }, { validator: emailAndPhone() });
}

If you need to recognize when the validation has detected an invalid input just make sure that emailAndPhoneError that was defined earlier is present on the form error list. Like this

*ngIf="myForm.hasError('emailAndPhoneError')" //true means invalid

edited Dec 23, 2017 at 13:51

answered Dec 23, 2017 at 4:57

Daniel C.

5,8184 gold badges25 silver badges27 bronze badges

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

3 Comments

Estus Flask Over a year ago

And where does emailAndPhoneError come from here?

Daniel C. Over a year ago

{ emailAndPhoneError : true } is the return value from emailAndPhone() function. It is only returned when your condition is invalid, otherwise it returns null.

Matt Over a year ago

@DanielC. Yes, this will be a good starting point to build from. Thanks.

Collectives™ on Stack Overflow

How do validate multiple fields as one in Angular?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related