Angular Reactive Form：如何预设值？（FormArray 包含对象）答案

【问题标题】：Angular Reactive Form : How to preset values ? (FormArray containing objects)Angular Reactive Form：如何预设值？（FormArray 包含对象）
【发布时间】：2021-05-30 05:57:40
【问题描述】：

我正在尝试实现一个经典的“更新对象”功能。

我有一个表格，列出了我所有的产品，每一行都有一个编辑按钮，打开一个我想显示产品属性值的模式。

我们在这里关注的属性是“角色”，它的值是一个对象数组，每个对象都从下拉列表中选择。

我设法显示了正确数量的对象（在该示例中为 3 个），但是没有设置值，并且在每种情况下都选择了默认选项。

我尝试在该属性上使用 angular 'patchValue()' 函数但没有成功。

这是我的打字稿：

public personas = new FormArray([], [], []);

constructor(private fb: FormBuilder, public productService: ProductService) {
  this.productForm = this.fb.group({
      personas: this.personas,
    });
}

public onEdit(product: Product): void {
    if (product.personas.length > 0) {
     this.personaService.personas$.pipe(takeUntil(this._destroyed$)).subscribe((personas: Persona[]) => {
        const array = product.personas.filter(p => personas.some(p2 => p.id === p2.id));
        this.personas = this.fb.array(array.map(persona => new FormControl({
          id: persona.id,
          persona: persona.persona,
        })));
      });
    }
}

这就是我的模板中的内容：

<div class="form-group">
  <label for="personas">Personas</label>
  <div id="personas" formArrayName="personas">
    <div *ngFor="let persona of personas.controls; let i = index;" class="d-flex m-1">
      <select
        *ngIf="!(personaService.isFetchingPersonas$ |async) && (personaService.personas$ |async) as options"
         class="form-control">
        <option *ngFor="let option of options" [ngValue]="option">{{ option.persona }}</option>
      </select>
  </div>
</div>

感谢您的帮助

！！！编辑！！！

我意识到，当我试图实现目标时，我打破了创建新产品的过程，因为 Persona 属性不再正确设置。

所以 Stackblitz 项目与上面的 sn-ps 略有不同。因为我将我的项目状态移回了它的功能状态。

STACKBLITZ：https://angular-ivy-cnmqhx.stackblitz.io

【问题讨论】：

你能创建一个Stackblitz 吗？
我想，但我实际上在医院里，而且我的连接非常糟糕。 Stackblitz 一直在尝试编译。我会尝试探索医院，以便尽快获得更好的信号。
Stackblitz : stackblitz.com/edit/angular-ivy-cnmqhx?file=src/app/… 请先阅读上面的“编辑”部分。

标签： angular crud angular-reactive-forms

【解决方案1】：

在hello.component.html的底部我添加了这个小助手来查看表单里面的内容。

<pre>
{{ productForm.value | json }}
</pre>

然后我将ngOnInit 更改为如下所示：

  public ngOnInit(): void {
    this.product.personas.forEach((persona: Persona) => {
      const option = this.options.find(x => x.id === persona.id);
      if (option) {
        this.addField(option);
      }
    });
  }

这里的想法是查找每个“选项”并将该选项放入 formArray，而不是“角色”。

还有一点简化的addField方法

  public addField(persona = {}): void {
    (this.productForm.get("personas") as FormArray).push(
      new FormControl(persona)
    );
  }

工作Stackblitz

【讨论】：