与反应形式相关的问题,Angular v4.3 .

Multiselect-dropdown.component.ts

实现了ControlValueAccessor,Validator . 添加了验证界面方法如下

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

Reactive Forms

我的表单分为多个部分,带有导航菜单 . 所有表单都在一个页面中构建,并基于菜单选择,使用* ngIf显示表单的一部分 . 我在表单的第一部分添加了Multiselect-dropdown控件 . 第一次表单加载默认选择第一部分 .

一切都很好,直到这里 .

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

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

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

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

这是链接https://github.com/angular/angular/issues/26792,其中解释了POC和重现的步骤

谢谢Sankara