有条件地从DOM添加/删除Angular 5反应形式自定义控件的验证状态不一致

时间:2018-07-12 17:33:14

标签: angular angular-reactive-forms

与反应形式Angular v4.3有关的问题。

Multiselect-dropdown.component.ts

已实现ControlValueAccessor,验证程序。 添加了如下的验证接口方法

validate(ctrl: FormControl) {
  return this.selections.length > 0 ? null : {required: "no selection"} : null;
}

活动表格

我的表单通过let nav菜单分为多个部分。所有表单都构建在一个页面中,并基于菜单选择,并使用* ngIf显示表单的一部分。 我在表单的第一部分中添加了Multiselect-下拉控件。 首次加载表单时,默认情况下会选择第一部分。

到这里一切都很好。

现在,我单击了下拉列表,但没有选择任何使下拉列表为空的项目。在这里,由于我触摸了控件,因此显示了所需的验证错误。现在留下错误,我切换到另一部分,然后回到第一部分。现在,它仍然显示正确的必需验证错误。

现在的问题是,如果从下拉列表中选择一项,validate()方法将返回null,但所需的验证错误不会消失。

调试后,我发现由于* ngIf重新创建了该组件,因此新组件不是FormControl最初在formGroup中创建的组件。 我使用的一种解决方法是从formGroup中删除FormControl,并在切换到该部分时再次重新创建它。但这不是正确的解决方案。

我想了解这种行为。我需要任何可以解决或了解此问题的帮助

这里是链接 https://github.com/angular/angular/issues/26792 用POC解释和复制步骤

谢谢 桑卡拉

0 个答案:

没有答案