angularvalidationtypescriptangular4-forms

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


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?


Solution

  • 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)