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