Angular, How to set validation for either of two field should validate in reaction form approach

Question

I'm trying to set user form validation, user must enter either of two fields, mobile or email fields

Add Guest reaction form Html:

<form class="new_guest" id="new_guest" [formGroup]="addGuestForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <input placeholder="Enter guest name" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="name"
                    id="guest_name" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Enter guest email" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="email"
                    id="guest_email" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Mobile Number, If any" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="mobile"
                    id="guest_mobile" autocomplete="off">
            </div>
            <input type="submit" class="btn btn-default btn-block" id="add_guest" value="ADD GUEST" [disabled]="!addGuestForm.valid">
        </form

AddGuest init:

this.addGuestForm = new FormGroup({
  'name': new FormControl(null, Validators.required),
  'email': new FormControl(null, Validators.email),
  'mobile': new FormControl(null)
})

Can anyone help?

You can subscribe to the form's [`valueChanges`](https://angular.io/api/forms/AbstractControl#valueChanges) and validate it there — cyberpirate92, Dec 14 '17 at 08:03

score 6 · Accepted Answer · answered Dec 14 '17 at 08:15

You can use form builder and provide customized validation for example:

this.addGuestForm = this.formBuilder.group({
'name': new FormControl(null, Validators.required),
  'email': '',
  'mobile': ''
}, {
      validator: (formControl) => {
        var emailCtrl = formControl.controls.email;
        var mobileCtrl = formControl.controls.mobile;


        if (emailCtrl != undefined && mobileCtrl != undefined)
             if(!(emailCtrl.value.length || mobileCtrl.value.length ))
                    return {invalid: true};
}
});

additionally you can also check for regex for email field define a variable regexPattern for email pattern check and use below in the custom validator if condition

regexPattern.test(emailCtrl.value)

score 1 · Answer 2 · edited Jul 06 '18 at 17:39

I had the same problem, my solution is a writing a custom validator:

export function oneOfControlRequired(...controls: AbstractControl[]): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const aControl of controls) {
          if (!Validators.required(aControl)) {
            return null;
          }
        }
        return { oneOfRequired: true };
     };
}

and you could use like that:

this.addGuestForm.setValidators([
  oneOfControlRequired(
      this.addGuestForm.get('email'),
      this.addGuestForm.get('mobile'),
  )
]);

maybe you want to slightly modify the oneOfControlRequired function to take controlNames: string[] as input param not AbstractControl[]

you can check the working example here.

score 0 · Answer 3 · answered Oct 25 '20 at 10:07

I've slightly changed the answer of @pogiaron So you can set the error key returned.

static oneControlRequired(errorKey: string, ...controls: AbstractControl[]) {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const aControl of controls) {
          if (!Validators.required(aControl)) {
            return null;
          }
        }
        return { [errorKey]: true };
     };
}

Angular, How to set validation for either of two field should validate in reaction form approach

3 Answers3

Linked