angular - 访问 Angular 表单的嵌套控件

Question

我正在将应用程序从 Angular 2 升级到 Angular 7，看起来我的大部分表单都已损坏。我有多个实例收到以下错误:

Property 'controls' does not exist on type 'AbstractControl'

在这个特定的例子中，我有一个 block 似乎循环遍历并验证表单数组。

for (let i = 0, len = this.form.controls[control].controls.length; i < len; i++) {

  this.form.controls[control].controls[i].controls.ConditionTypeId.setValidators(Validators.required);
  this.form.controls[control].controls[i].controls.ConditionTypeId.updateValueAndValidity();
  this.form.controls[control].controls[i].controls.ToBeCompletedDate.setValidators(Validators.required);
  this.form.controls[control].controls[i].controls.ToBeCompletedDate.updateValueAndValidity();
}

自 Angular 2 以来，嵌套表单/表单数组的工作方式是否发生了重大变化？如果是，我重构任何以这种方式处理嵌套表单的代码的最有效方法是什么？

Answer 1

我不确定更改何时发生，因为直到 v4 之前我才认真对待 Angular。但我相信您的问题只是对表单类进行更严格的输入或重组。 AbstractControl 是这些表单类的通用抽象类。 FormArray 类扩展了它并添加了您要查找的 controls 属性。但是 FormGroup.controls[...] 只是返回通用的 AbstractControl。因此，在尝试从中获取控件之前，您必须将其转换为 FormArray:

(this.form.controls[control] as FormArray).controls[i].controls...

更常见的模式是为特定数组创建一个 getter，但支持 ts 文件中的一个简单函数可能更适合您的情况:

getFormArray(controlName) {
  return this.myForm.get(controlName) as FormArray;
}