控件的控件

Question

目前我正在为我的表单与mat-errors和hasErrors进行验证，一切都很好，直到我需要另一个控件的"inner"Formgroup，我的意思是:

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>

我也尝试过在html中使用person.nameC，但这也不起作用。什么是一个好方法来达到我的内部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>