如何使用updateValueAndValidity（）函数切换FormControls验证？

Question

在Angular应用程序的表单中，我有一个单选按钮组，该组决定是否需要Input FormControl。

如果选择“电子邮件”单选按钮，则不需要“电话输入”。但是，如果选择了“电话”单选按钮，则需要“电话输入”。

当前，如果用户触摸“电话输入”字段并离开，则不会出现所需的字段验证。

但是，如果您选择“电话”单选按钮，请触摸并离开该字段，验证将按预期方式显示。

问题是我希望在选中“电话”单选按钮后立即在“电话输入”字段中显示此必需的验证。

我尝试使用updateValueAndValidity()方法执行此操作，但是它不起作用。

有人可以告诉我需要做些什么才能使这种情况发生吗？

下面是我现有的代码。非常感谢！

HTML：

<div class="form-group">
<label>Contact Preference:</label>
    <input type="radio" value="email" formControlName="contactPreference" />Email
    <input type="radio" value="phone" formControlName="contactPreference" />Phone
</div>

<div class="form-group">
    <label for="phone">Phone:</label>
    <input id="phone" formControlName="phone" type="text"  placeholder="Phone" class="form-control"
            [ngClass]="{ 'is-invalid': formErrors.phone}" (blur)="logValidationErrors()">
    <div class="invalid-feedback">
          {{formErrors.phone}}
    </div>
</div>

TS：

    ngOnInit() {
this.artistForm = this.fb.group({
        fullName: ['', Validators.required],
        contactPreference: ['email'],
        emailGroup: this.fb.group({
            email: ['', [Validators.required, CustomValidators.emailDomain('gmail.com')]],
            confirmEmail: ['', Validators.required]
  }, { validator: matchEmail }),
        phone: [''],
        genres: this.fb.array([
            this.addGenreFormGroup()
        ])
    });

this.artistForm.get('contactPreference').valueChanges.subscribe((data: string) => {
    this.onContactPreferenceChange(data);
    });

this.artistForm.valueChanges.subscribe((data) => {
    this.logValidationErrors(this.artistForm);
    });
}

onContactPreferenceChange(selectedValue: string) {
    const phoneControl = this.artistForm.get('phone');
    if (selectedValue === 'phone') {
        phoneControl.setValidators(Validators.required);
    } else {
        phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
}