代码之家 › 专栏 › 技术社区 › adam0101

使用反应窗体,如何在隐藏时禁用对嵌套角度组件的验证?

angular

adam0101 · 技术社区 · 6 年前

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

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] ,但这会引发错误

找不到路径为“parent->child”的控件

我不知道为什么。在嵌套组件中处理验证器的正确方法是什么?

2 回复 | 直到 6 年前

adam0101 6 年前

我找不到一个干净的方法来获得一个孩子的引用,这个引用不会因为使用 *ngIf 我不想直接从父级清除和设置验证器,因为它似乎打破了封装,要求父级明确知道子组件需要什么验证器。

this.childFormControl.disable() 和 this.childFormControl.enable() 它允许我为控件禁用验证器,并自动执行其中的所有子控件。

更新

this comment 从某个角度来说可能有用。他们建议添加和删除表单控件,如 this.form.removeControl('name') 然后写下因此DOM依赖于控件的存在,如 *ngIf="form.contains('name')"

Paola Reyes 6 年前

我需要类似的东西在过去,我做了以下:

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();
  }
});

在这个特殊的例子中,我有一个复选框,如果用户单击它,就会出现一个带有嵌套表单控件的新文本区域

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前