Question

我有一个包含多个嵌套子组件的父组件。可以有条件地显示或隐藏子组件，因此我需要启用和禁用这些子组件中的验证器，以便在隐藏子组件时，其验证器不会使表单无效。

我尝试在子组件上添加公共方法，如下所示：

clearValidators() {
  this.formControl.clearValidators();
}

resetValidators() {
  this.formControl.setValidators(Validators.compose([
    Validators.required,
    CustomValidators.existsIn(this.items.map(l => l[this.itemIdField]))
  ]));
}

然后我通过使用@ViewChild(ChildComponent) child: ChildComponent;获取对孩子的引用来从父对象中调用这些方法，但是如果我使用*ngIf隐藏孩子，则该方法不起作用，因为@ViewChild参考变得不确定。

我尝试从*ngIf更改为[hidden]，但这会引发错误

找不到路径为“父母->孩子”的控件

我不确定为什么。处理嵌套组件中的验证器的正确方法是什么？

Answer 1

我找不到一种干净的方法来引用不会因使用*ngIf而中断的子级，并且我不想直接从父级清除并设置验证器，因为它似乎断了封装以要求父级对子组件需要哪些验证器有明确的了解。

我最终使用了this.childFormControl.disable()和this.childFormControl.enable()，这使我可以禁用该控件的验证器，并自动执行其中的所有子控件。

更新

我刚从Angular团队的某人身上发现了this comment，可能有用。他们建议添加和删除this.form.removeControl('name')之类的表单控件，然后编写*ngIf，以便DOM取决于*ngIf="form.contains('name')"中控件的存在。这可能是一个更好的方法。

Answer 2

过去我需要类似的东西，我做了以下事情：

this.formName.controls.formControlParentName.valueChanges.subscribe(val => {
  if(val){
    this.formName.controls.formControlChildName.setValidators([Validators.required]);
  } else {
    this.formName.controls.formControlChildName.clearValidators();
    this.formName.controls.formControlChildNames.updateValueAndValidity();
  }
});

在这种情况下，我有一个复选框，如果用户单击它，则会出现一个带有嵌套表单控件的新文本区域

使用反应形式，隐藏时如何禁用对嵌套角度分量的验证？

2 个答案: