FormControl 类型 angular 抽象类型 typescript答案

【问题标题】：FormControl type angular Abscract type typescriptFormControl 类型 angular 抽象类型 typescript
【发布时间】：2021-05-11 17:29:46
【问题描述】：

我正在尝试使 tslint 正确的返回类型，并有类似的东西

 get formControls(): any {
    return this.form.controls;
  }

它返回错误 'any' 的类型声明失去类型安全性。考虑用更精确的类型替换它。

在上一个问题中 FormControl type angular typescript 我得到了我的问题的答案，让它变成这样

 get formControls(): { [key: string]: AbstractControl } {
    return this.form.controls;
  }

现在可以了，但是组件内部的其他功能有问题，因为我有更多这样的方法

  get addressFormControls(): any {
    return this.formControls.address.controls;
  }

  get addressFormGroup(): any {
    return this.formControls.address;
  }

现在我收到另一个错误“AbstractControl”类型上不存在属性“控件”

这是我的最终代码，谁能帮我写出正确的返回类型

  get formControls(): { [key: string]: AbstractControl } {
    return this.form.controls;
  }

  get addressFormControls(): any {
    return this.formControls.address.controls;
  }

  get addressFormGroup(): any {
    return this.formControls.address;
  }

提前致谢

【问题讨论】：

标签： angular typescript

【解决方案1】：

很明显会出错。

AbstractControl 是 FormGroup FormArray 和 FormControl 扩展的基类。

FormGroup 和 FormArray 定义了 control，这在 FormControl 和 AbstractControl 中不可用。

根据角度定义，如果说form 是FormArray 类型，那么formControls() 必须返回AbstractControl[]

get formControls(): AbstractControl[] {
  return this.form.controls;
}

但是，如果 form 是 FormGroup，那么返回类型就像你提到的那样很好

get formControls(): { [key: string]: AbstractControl } {
  return this.form.controls;
}

但由于AbstractControl 没有定义controls，我们可以手动将其类型转换为FormGroup。所以在这种情况下，这将解决问题。

get addressFormControls(): { [key: string]: AbstractControl } {
  return (this.formControls.address as FormGroup).controls;
}

get addressFormGroup(): FormGroup {
  return this.formControls.address as FormGroup;
}

更新：我建议重构为

get addressFormControls(): { [key: string]: AbstractControl } {
  return this.addressFormGroup.controls;
}

【讨论】：