在 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>