时间戳

首页 > 解决方案 > 错误：无法读取 null 的属性“控件”（FormGroup 内的 FormArray 在 FormGroup 内的 FormArray 内）

angular - 错误：无法读取 null 的属性“控件”（FormGroup 内的 FormArray 在 FormGroup 内的 FormArray 内）

问题描述

我有一个表格来为这些项目添加项目和回购。添加存储库时，您输入一个 POM URL。我在访问 POM URL 时遇到问题，它阻止了表单加载。

我收到错误“无法读取 null 的属性‘控件’

（代码在另一台计算机上，所以我会尽我所能重新创建它）

TS

this.addProject = new FormGroup({
  ...
  repos: new FormArray([
    new FormGroup({
      ...
      pomUrls: new FormArray([new FormControl()])
    })
  ])
});

addRepo(): void {
  this.addRepos.push(new FormGroup({
    ...
    pomUrls: new FormArray([new FormControl()])
  }));
}

get addRepos(): FormArray {
  return this.addProject.get('repos') as FormArray;
}

get pomUrls() {
  return this.addRepos.get('pomUrls') as FormArray;
}

addPomUrls() {
  const control = new FormControl();
  this.pomUrls.push(control);

removePomUrl(index: number): void {
  this.pomUrls.removeAt(index);
}

HTML

<ng-container formArrayName="pomUrls">
  <div *ngFor="let _ of pomUrls.controls; index as i; count as c;">
    <las-ux-textfield [label]="'POM URLs'" [formControlName]="i"></las-ux-textfield>
    <div clss="button-container">
      <las-ux-button [id]="'addPom' + i" ... (click)="addPomUrls()"> </las-ux-button>
      <las-ux-button *ngIf="c > 1" [id]="'removePom' + i" ... (click)="removePomUrl(i)"> </las-ux-button>
    </div>
  </div>
</ng-container>

因此，这给了我“无法读取 null 的属性‘控件’”错误

如果我将 get pomUrls 更改为以下内容-

get pomUrls() {
  return this.addRepos.at(0).get('pomUrls') as FormArray;

- 然后它完美地工作......至少在索引0处检索。有了这个，我可以为单个repo添加多个pomUrls，或者使用单个pomUrl添加多个repos。

但是我不能用多个 pomUrls 添加多个 repos。然后它给了我一个错误“找不到带有路径的控件：'repos -> 1 -> pomUrls -> 1'”。所以它不能超过索引 0，这是有道理的。

我的问题是为什么我不能让它工作？为什么 addRepos.at(0).get('pomUrls') 有效但 addRepos.get('pomUrls') 无效？

这是我的第一个 Angular 大项目，我已经坚持了一周。我一直在寻求帮助，用我能想到的各种方式来表达，并在stackoverflow上阅读了很多文章和其他问题，但没有运气。

任何帮助是极大的赞赏！

标签： angulartypescriptformarrayformgroups

解决方案

请添加?到pomUrls?.controls您的模板 html 中。

pomUrls在运行时的某个时刻未定义。

?.是一个空安全运算符

推荐阅读