在 Angular 中設置模板以匹配反應形式的 formArray 值

Question

我正在嘗試在 angular 中制作一個反應形式，它的格式是我的 API。 我知道我可以在事后進行一些數據轉換以獲得我需要的東西，但我想知道我是否可以這樣設置表格。

它簡化了一點，但是這段代碼讓我得到了我正在尋找的確切格式。

myForm = this.fb.group({
  fieldOne: [''],
  fieldGroup: this.fb.array([
    this.fb.group({
      groupId: [1],
      myValue: []
    }),
    this.fb.group({
      groupId: [2],
      myValue: []
    }),
    this.fb.group({
      groupId: [3],
      myValue: []
    })
  ])
});

我的問題是如何在模板中設置此表單，以便為 fieldGroup 中的每個項目設置 myValue？

https://stackblitz.com/edit/angular-ivy-gv4zd6?file=src/app/app.component.html

Answer 1

我不完全確定，但我認為您的表單組需要一個名稱：

myForm = this.fb.group({
  fieldOne: [''],
  fieldGroup: this.fb.array([
    name1: this.fb.group({
      groupId: [1],
      myValue: []
    }),
    name2: this.fb.group({
      groupId: [2],
      myValue: []
    }),
    name3: this.fb.group({
      groupId: [3],
      myValue: []
    })
  ])
});

示例 html：

<form novalidate
          (ngSubmit)="saveProduct()"
          [formGroup]="myForm">
    <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="fieldOneId">fieldOne</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="fieldOneId"
                 type="text"
                 formControlName="fieldOne"/>
        </div>
    </div>
    <div formArrayName="tags">
        <div formGroupName="name1">
            <div class="form-group row mb-2">
                <label class="col-md-2 col-form-label"
                   for="groupIdId">groupId</label>
                <div class="col-md-8">
                    <input class="form-control"
                         id="groupIdId"
                         type="number"
                         formControlName="groupId"/>
                </div>
                <!-- Repeat -->
            </div>
            <!-- Repeat -->
        </div>
    </div>
</form>