Angular2+在两个输入字段之间共享验证

Question

我有一项有趣的任务(我想(。我需要一个输入字段共享验证。期望的结果是两个字段都是"0"；技术上"；必需。但是，如果用户输入了他们的电子邮件地址，那么这两个字段现在都是有效的，如果他们填写了电话号码，则反之亦然。下面是我的代码。

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>

相关TS

checkValidation(name) {
if (
this.form.controls[name]?.controls?.email?.value ||
this.form.controls[name]?.controls?.phone?.value
) {
this.eitherFieldRequired = false;
}
}

Answer 1

您可以通过以下两种方式中的任意一种实现：

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

如果您需要更多指导，请告诉我。