Angular 8 中的嵌套表单组和 FromArray答案

【问题标题】：Nested Form Groups & FromArray in Angular 8Angular 8 中的嵌套表单组和 FromArray
【发布时间】：2020-06-23 09:33:05
【问题描述】：

我正在处理具有嵌套表单组和表单数组的表单，但我无法在 ts 中绑定值。我是角度新手，所以对表单组和表单数组不太清楚。下面的 json 可以在表单组中有多个数组，在表单组中可以有嵌套的表单数组。这是我想从这个表单执行并制作下面的 json 结构的示例示例

Json 使用这种形式：

{
  ip:'1.2.3.4',
  create_adjacency:{
    customerName:'ABC',
    traffic_group:[{
       _display_name:'DEF',
       traffic_group_limits:{
          calls:'23' }
    }]
  }
}

HTML -

<div class="page-container pb-25 ">
      <form [formGroup]="firstFormGroup">
          <div class="form-group custom-input select-custom-prime">
                <label>IP</label>
                <input
                   placeholder="Select"
                  formControlName="ip"
                />                  
              </div>
          <div class="row mb-20" formGroupName="create_adjacency">
            <div class="col-xl-4 col-lg-6 col-md-6">
              <div
                class="form-group custom-input select-custom-prime"
                >
                <label>Customer Name</label>
                <input
                   placeholder="Select"
                  formControlName="customerName"
                />
                
              </div>
            </div>
            <div formArrayName="traffic_group">
              <div class="col-xl-3 col-lg-6 col-md-6">
                <div  
                    class="form-group custom-input mr-10 select-custom-prime" >
                  <label>Traffic group Name</label>

                  <input
                    formControlName="_display_name"
                  />
                </div>
              </div>

              <table
                class="mt-30 table table-striped table-bordered wd-98"
              >
                <thead>
                  <tr>
                    <th>Traffic Group Name</th>
                    <th>Concurrent Calls</th>
                  </tr>
                </thead>
                <tbody formGroupName="traffic_group_limits">
                  <tr>
                    <td>
                      <div class="">
                        <div
                          class="form-group custom-input select-custom-prime"
                        >
                          <input
                            pInputText
                            autofocus
                            disabled
                            type="text"
                            class="form-control"
                          />
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="">
                        <div
                          class="form-group custom-input select-custom-prime"
                        >
                          <input
                            formControlName="calls"
                            pInputText
                            autofocus
                            class="form-control"
                          />
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
    </form>
</div>

Ts代码-

this.firstFormGroup = this.formBuilder.group({
      ip: [''],
      create_adjacency: this.formBuilder.group({
        customerName: ["", Validators.required],
        traffic_groups: this.formBuilder.array([this.traffic_groups])
      })

    });
  
  
  get traffic_groups(): FormGroup {
    return this.formBuilder.group({
      _display_name: ["", Validators.required],
      traffic_group_limits: this.formBuilder.group({
        "call-appearances": ["", Validators.required]
      })
    });
  }

【问题讨论】：

你能在这里创建stackblitz吗stackblitz.com

标签： angular8 formarray formgroups angular-formbuilder

【解决方案1】：

在我看来，尽管 Angular 有自己的方法，但对于初学者来说可能有点吓人。所以我更喜欢分解表单组，然后从所有表单中构建最终的 json。

.html

   <div class="page-container pb-25 ">
      <form [formGroup]="firstFormGroup">
          <div class="form-group custom-input select-custom-prime">
                <label>IP</label>
                <input
                   placeholder="Select"
                  formControlName="ip"
                />                  
              </div>
          <div class="row mb-20" [formGroup]="adjacencyFormGroup">
            <div class="col-xl-4 col-lg-6 col-md-6">
              <div
                class="form-group custom-input select-custom-prime"
                >
                <label>Customer Name</label>
                <input
                   placeholder="Select"
                  formControlName="customerName"
                />
                
              </div>
            </div>
            <div [formGroup]="trafficFormGroup">
              <div class="col-xl-3 col-lg-6 col-md-6">
                <div  
                    class="form-group custom-input mr-10 select-custom-prime" >
                  <label>Traffic group Name</label>

                  <input
                    formControlName="_display_name"
                  />
                </div>
              </div>

              <table
                class="mt-30 table table-striped table-bordered wd-98"
              >
                <thead>
                  <tr>
                    <th>Traffic Group Name</th>
                    <th>Concurrent Calls</th>
                  </tr>
                </thead>
                <tbody [formGroup]="trafficGroupLimit">
                  <tr>
                    <td>
                      <div class="">
                        <div
                          class="form-group custom-input select-custom-prime"
                        >
                          <input
                            pInputText
                            autofocus
                            disabled
                            type="text"
                            class="form-control"
                          />
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="">
                        <div
                          class="form-group custom-input select-custom-prime"
                        >
                          <input
                            formControlName="calls"
                            pInputText
                            autofocus
                            class="form-control"
                          />
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
    </form>
</div>

.ts

    this.firstFormGroup = this.formBuilder.group({
      ip: [''],
      create_adjacency: [{}]
    });

    this.adjacencyFormGroup = this.formBuilder.group({
        customerName: ["", Validators.required],
        traffic_groups: [[]])
      });


this.trafficFormGroup = this.formBuilder.group({
        _display_name: ["", Validators.required],
      traffic_group_limits: [{}]
      });
  
  
  this.trafficGroupLimit = this.formBuilder.group({
      calls: [''],
    });

创建json的函数

createFormJSON() {

this.trafficFormGroup.patchValue({
  traffic_group_limits: this.trafficGroupLimit.value
});

this.adjacencyFormGroup.patchValue({
  traffic_groups: this.allTrafficGroups // store all traffic groups in this array before patching
});

this.firstFormGroup.patchValue({
  create_adjacency: this.adjacencyFormGroup.value,
});
}

【讨论】：