控制的控制

Question

目前，我正在使用mat-errors和hasErrors对我的表单进行验证，直到我需要另一个“内部”表单组的控制，我的意思是：

​

prozessPersonenzuordnungenForm = new FormGroup({
    person: new FormGroup({
      firmenbezeichnung: new FormControl(),
      nameC: new FormControl('', [Validators.required]),
      briefanrede: new FormControl('x'),
    }),
  });

​

我正在尝试达到person.nameC验证。我正在使用这个函数：

​

public hasError = (controlName: string, errorName: string) => {
    return this.prozessPersonenzuordnungenForm.controls[controlName].hasError(
      errorName
    );
  };

​

问题是，使用这个函数，我只访问person FormGroup，而不是nameC formControl。所以我需要另一个“更深层次的控制”。

我的html就是这样的：

​

<mat-error *ngIf="hasError('nameC', 'required')">Bitte gebe eine Person an!</mat-error>

​

我也用person.nameC在html中尝试过，但这也不起作用。用我的FormControl函数访问我的内部hasError的好方法是什么？

Answer 1

由于您的controls属性是一个具有简化结构的对象：

controls = {
    person: {
       nameC: {
         hasErrors: err => bool
       }
    }
}

您不能说是controls["person.nameC"]，因为没有这样的属性，而且这些点符号不会自动转换为嵌套的属性访问。

这完全取决于你如何处理它们。一种方法是解析点分隔字符串，拆分它们，并尝试在循环中访问对象。

例如，如果将"person.nameC"字符串拆分为.数组，则将收到arr = [ "person", "nameC" ]。

现在让我们来看看算法：

let property = controls;

我们从最远处的属性开始--整个控制对象。我们一个接一个地深入到：

property = property[ arr[0] ]

这将计算为property = property["person"]，这将使property变量看起来如下：

property = {
    nameC: {
       hasErrors: err => bool
    }
}

现在你可以继续用同样的方式

property = property[ arr[1] ]

它将评估为property = property["nameC"]，最终结果将是

property = {
    hasErrors: err => bool
}

这就是你想要的。

当然，您不需要手动处理，您只需遍历它：

let property: any = this.prozessPersonenzuordnungenForm.controls;
controlName.split('.').forEach(propertyKey => property = property[propertyKey]);

return property.hasError(errorName);

Answer 2

很感谢你们的帮助，但我找到了一个更简单的方法！

这是我的工作解决方案：

​

public hasError = (controlName: string, deepControlName:string,  errorName: string) => {
    return this.prozessPersonenzuordnungenForm.controls[controlName].get(deepControlName)?.hasError(errorName);
  };

​

例如，我现在可以这样使用它：

​

<mat-error *ngIf="hasError('person', 'nameC', 'required')"> </mat-error>  

​