带有来自服务的数据的 Angular FormArray setValue

Posted 2023-03-25

【中文标题】带有来自服务的数据的 Angular FormArray setValue

【英文标题】：Angular FormArray setValue with data from Service

【发布时间】：2021-12-07 23:44:37

【问题描述】：

我对 FormArray 有疑问，可能需要一些帮助。 我有一个带有变量 FormArray 的表单，它可以工作，我可以将数据发送到后端。 问题是，我无法根据从后端收到的数据设置值。

这是打字稿代码：

this.form = this.fb.group(
  title: new FormControl("",[Validators.required]),
  actors: new FormArray([])
)

this.moviesService.getMovie(this.movieId).subscribe(movieData => 
  this.movie = movieData;
  this.form.patchValue(
    title: this.movie.title,
    actors: this.movie.actors,           
  )
)

然后在 html 中单击按钮，我称之为函数：

addActor()
  const actorsForm = this.fb.group(
    actor: '',
    role: ''
  )
  this.actors.push(actorsForm);


removeActor(i: number)
  this.actors.removeAt(i);

还有 HTML：

<form [formGroup]="form" (submit)="onSubmit()">
  <table  formArrayName="actors">
    <tr>
      <th colspan="2">Besetzung:</th>
      <th >
        <button type="button" mat-stroked-button color="primary" (click)="addActor()">Hinzufügen +</button>
      </th>
    </tr>
    <tr *ngFor="let actor of form.get('actors')['controls']; let i=index" [formGroupName]="i">
      <td>
        Darsteller:
        <input type="text" formControlName="actor" class="form-control">
      </td>
      <td>
        Rolle:
        <input type="text" formControlName="role" class="form-control">
      </td>
      <td>
        <button (click)="removeActor(i)" mat-stroked-button color="warn">Remove</button>
      </td>
    </tr>
  </table>
  <button mat-raised-button color="primary" type="submit">Film speichern</button>
</form>

所以我的问题是： 如何从 actors 数组中的 movieService 获取数据？

actors: this.movie.actors 不起作用，我知道我必须遍历数组但不知道如何。

编辑： 好的，我看到我从数组中得到了第一个对象，但是如果我添加更多的演员，它只会显示第一个。

【问题讨论】：

您好，您能否附上从 API 返回的 JSON 数据，用于修补 FormArray？谢谢。

你能告诉我们你的错误信息吗？

嗨。当然。它看起来像这样： ["id":5,"role":"test","actor":"test","id":6,"role":"test","actor":" test2"] 没有错误导致表单为空

您应该传递表单组数组，就像您的 addActor 方法一样。所以它看起来像：actors: this.movi​​e.actors.map((actor, role, id) => this.fb.group( actor, role, id ))

如果我尝试映射我得到这个错误：属性'角色'不存在类型'字符串'。

【参考方案1】：

假设：

预计收到的 API 响应数据为：

  "title": "James Bond 007",
  "actors": [
     "id": 5, "role": "test", "actor": "test" ,
     "id": 6, "role": "test", "actor": "test2" 
  ]

---

我认为不能直接将patchValue 换成FormArray。相反，使用map 迭代movie.actors 以便将FormGroup 推送到actors FormArray。

this.movie.actors.map(
  (actor: any) => 
    const actorsForm = this.fb.group(
      actor: actor.actor,
      role: actor.role,
    );

    this.actors.push(actorsForm);
  
);

this.form.patchValue(
  title: this.movie.title,
);

---

注意：由于你实现了actors getter，你可以简化

form.get('actors')['controls']

到：

actors.controls

html

<tr
  *ngFor="let actor of actors.controls; let i = index"
  [formGroupName]="i"
>

</tr>

Sample Solution on StackBlitz

【讨论】：

这行得通。特维姆。所以问题是我认为我可以通过补丁值形式的演员进行映射，也感谢简化提示