如何解决错误：无法读取 null 的属性“控件”FormGroup 内的 FormArray 内 FormArray 内的 FormGroup

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

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

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

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 的属性‘控件’”错误

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

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

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

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

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

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

非常感谢任何帮助！

解决方法

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

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

?. 是空安全操作符

关于问题

了解其工作原理的最简单方法是将 FormGroup 的值可视化

下面是 FormGroup 的 addProject 的样子

  {
    repos: [
      {
         pomUrls: ['']
      }
    ]
  }

这是为了addRepos

 [
   {
      pomUrls: ['']
   }
 ]

现在考虑下面的代码

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

以上代码取第一项 (.at(0))，并提取 pomUrls 属性。基本上，如果这是一个简单的 JS 代码，它将是 myFormGroup[0].pomUrls。正如您所提到的，这非常有效。

现在让我们试试这个代码

  addRepos.get('pomUrls')

现在上面就像尝试做下面的事情

  const addProject =   {
repos: [
  {
     pomUrls: ['']
  }
]
  }
  const addRepos = addProject.repos;
  console.log(addRepos.pomUrls)

所以通常就像尝试从数组中提取属性而不先获取特定索引

如何解决？

您可以使用多种方法来解决这个问题。你可以在下面考虑

getPomUrls(i) {
  return this.addRepos.controls[i].get('pomUrls') as FormArray;
}

在上面而不是将 pomUrls 设置为 getter，使用一个接受索引参数的函数

编辑 1

由于我们删除了 pomUrls，您的 addPomUrls 也必须更改

    addPomUrls(i) {
      const control = new FormControl();
      this.getPomUrls(i).push(control)
    }

基本上我们是为项目的特定索引添加一个 pomUrls