Angular2+ shared validation between two input fields - html

Question

I have an interesting task (I think). I need to have an input field share validation. The desired outcome would be both fields are "technically" required. However, if a user types in their email address then both fields are now valid and vice versa if they fill out a phone number. Here is my code below.
HTML
<div class="col-12 col-md-6 col-lg-3">
<label>Phone Number</label>
<div class="input-group">
<input
class="form-control"
type="text"
ngModel
#contactPhone="ngModel"
name="phone"
minlength="10"
[required]="contactEmail.invalid"
(change)="checkValidation(name)"
/>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="form-group">
<label>Email</label>
<input
class="form-control"
type="text"
ngModel
[ngClass]="setClasses(contactEmail, form)"
#contactEmail="ngModel"
name="email"
maxlength="100"
pattern="\b[\w.%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b"
[required]="contactPhone.invalid"
(change)="checkValidation(name)"
/>
</div>
Relevant TS
checkValidation(name) {
if (
this.form.controls[name]?.controls?.email?.value ||
this.form.controls[name]?.controls?.phone?.value
) {
this.eitherFieldRequired = false;
}
}

Answer 1

You can do this in either one of two ways:
this.myFormGroup({ ... }, formValue => this.myValidator)
this.myFormGroup
.get(‘myControl’)
.valueChanges
.pipe(
takeUntil(this.destroyed), // handle the unsubscription
tap(value => {
if (value) {
this.myFormGroup
.get(‘myControl’)
.setValidators([ ... ])
} else {
// unset validators
}
}),
).subscribe()
Let me know if you need more guidance.