【发布时间】:2019-04-06 18:08:53
【问题描述】:
我有两个表单组名称,如下所示。有时不会向用户显示一种表单。当两者都显示时,我没有问题。我有一个在表单有效时可见的按钮。
<div
*ngIf="showPersonalInfo"
class="personalInfo"
formGroupName="personalInfo"
>
<div
*ngIf="showFamilyInfo"
class="familyInfo"
formGroupName="familyInfo"
>
<button
*ngIf="InfoForm.valid"
class="submitButton"
</button>
我使用下面的代码初始化我的表单。
this.InfoForm = this.formBuilder.group({
personalInfo: this.getPersonalInfo(),
familyInfo: this.getFamilyInfo(),
});
this.getFamilyInfo() 中的代码将 showFamilyInfo 设置为 true 或 false,并且在这两种情况下都会初始化表单,否则我的 html 会抛出 familyInfo 找不到。
我们的一项服务有时会查找成员资料并提取现有的家庭信息/个人信息并填充模型并将 showPersonalInfo/showFamilyInfo 设置为 true。
当 showFamilyInfo 为 false 时,我的 InfoForm.FamilyInfo 表单控件显示为无效。为了避免这个错误,我正在使用下面的代码清除验证器,但它仍然显示 familyInfo 表单控件状态无效。不过我的 PersonalInfo 是有效的。
当 showFamilyInfo 为 false 时如何忽略与 FmilyInfo 相关的所有内容,以便按钮可见。
this.InfoForm.get('familyInfo').clearValidators();
this.InfoForm.get('familyInfo').updateValueAndValidity();
【问题讨论】:
-
我在 Angular 6 中遇到了同样的问题。以下两个选项都不起作用 this.form.get('name').clearValidators() 和 this.form.controls['name'] .clearValidators 但暂时我已经根据我的功能应用了解决方案
标签: javascript angular forms typescript