angular - 将表单作为对象数组提交

Question

我的组件中有以下 html，我尝试根据可以从 0 到 N 的选定元素的数量动态生成表单

<form #form="ngForm" id="formGroupExampleInput">
  <div class="col-xs-5 col-md-offset-1">
    <a class="list-group-item clearfix" *ngFor="let selectedApi of selectedApps;let i=index">
      <div class="pull-right">
        <button type="button" class="close" (click)="removeFromSelectedApi(i)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="pull-left">
        <h4 class="list-group-item-heading">{{selectedApi.url}}</h4>
        <p class="list-group-item-text">{{selectedApi.method}}</p>
        <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-users"
            placeholder="number of users" ngModel>
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-rpm"
            placeholder="request per minute between all users" ngModel>
        </div>
        <hr>
        <div class="form-group" *ngFor="let requiredHeader of selectedApi.requiredHeaders; let in=index">
          <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredHeader}}"
            placeholder={{requiredHeader}} ngModel>
        </div>
        <div class="form-group" *ngFor="let requiredParameter of selectedApi.requiredParametersInURL; let in=index">
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredParameter}}"
              placeholder={{requiredParameter}} ngModel>
          </div>
        <div class="form-group" *ngIf="selectedApi.method=='POST' || selectedApi.method=='PUT' || selectedApi.method=='DELETE'">
          <!-- <textarea class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredHeader}}" rows=20></textarea> -->
          <textarea  class="form-control"
                rows="5"
                name="{{i}}-body" 
                id="{{i}}-body" 
                placeholder="body" ngModel></textarea>
        </div>
      </div>
    </a>
  </div>
  <div class="pull-right">
    <button class="btn btn-success btn-lg" (click)="onSubmitTest(form)">Submit</button>
  </div>
</form>

当我创建新元素并提交表单时，我在 form.value 上得到的结果是这样的：

0-auth-system: "c"
0-auth-user: "d"
0-auth-user-id: "e"
0-email: "h"
0-module: "g"
0-rpm: "b"
0-task-client-key: "f"
0-users: "a"
1-auth-system: "k"
1-auth-user: "l"
1-auth-user-id: "m"
1-rpm: "j"
1-task-client-key: "n"
1-users: "i"

实际上我想要的是如下所示的输出，因为它更易于处理，并且我不想开发代码来解析到以前的结构，如果我可以将它作为一个数组：

[
 {
  auth-system: "c"
  ,auth-user: "d"
  ,auth-user-id: "e"
  ,email: "h"
  ,module: "g"
  ,rpm: "b"
  ,task-client-key: "f"
  ,users: "a"
},
{
  auth-system: "k"
  ,auth-user: "l"
  ,auth-user-id: "m"
  ,rpm: "j"
  ,task-client-key: "n"
  ,users: "i"
 }
]

任何人都知道我怎么能做到这一点？

标签： angulartypescript

Answer 1

   <form [formGroup]="myFormUnit" (ngSubmit)="submit()">
        <table class="table table-lessons table-striped table-hover">
          <thead>
          <tr>
            <th></th>
            <th>Field A</th>
            <th>Field B</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of myFormUnit.get('items').controls; let i=index" [formGroup]="item">
            <td>
              <input type="text" class="form-control lablel border-less" [attr.id]="'name'+i" formControlName="name"
                     disabled="disabled">
              <input type="number" class="form-control hidden" readonly="readonly" hidden="hidden"
                     [attr.id]="'grade_list'+i" formControlName="grade_list"
                     style="visibility: hidden;">
            </td>
            <td>
              <input type="number" class="form-control" [attr.id]="'min_grade'+i" formControlName="min_grade">
            </td>
            <td>
              <input type="number" class="form-control" [attr.id]="'max_grade'+i" formControlName="max_grade">
            </td>
          </tr>
          </tbody>
        </table>
      </form>

和 ts 文件是：

 myFormUnit: FormGroup;
  protected onInitializeComponent() {
    this.myFormUnit = this.fb.group({
      items: this.fb.array([])
    });
  }
  private fillUnitform(input?: any) {
    this.myFormUnit = this.fb.group({
      items: this.fb.array(
        []
        // [this.buildItem(null, 'lesson'), this.buildItem(null, 'lesson')]
      )
    });
    this.gradeListItems.forEach(item => {
      if (item.value !== "12") {
        const tmp: Array<any> = this.gridData.data;
        tmp.forEach(element => {
          if (element.lesson_type === item.value) {
            item.value = element.num_unit;
          }
        });
        const fbb = this.myFormUnit.get("items") as FormArray;
        if (item.value !== "12") {
          const newItem = {
            name: item.text,
            grade_list: item.value,
            min_grade: item.min_grade,
            max_grade: item.max_grade
          };
          if (input) {
            // if (input.length > 0)

            input.forEach((element: any) => {
              if (element.grade_list === item.value) {
                newItem.min_grade = element.min_grade;
                newItem.max_grade = element.max_grade;
              }
            });
          }

          fbb.push(this.fb.group(this.buildItem(newItem)));
        }
      }
    });
  }
  buildItem(item: any) {
    return {
      name: new FormControl(item.name),
      grade_list: new FormControl(item.grade_list),
      min_grade: new FormControl(item.min_grade),
      max_grade: new FormControl(item.max_grade)
    };
  }

submit(){
        this.myFormUnit.value.items.forEach(
          (item): any => {
            if (item.min_grade || item.max_grade) {
              grade_list.push({
                grade_list: item.grade_list,
                min_grade: item.min_grade,
                max_grade: item.max_grade
              });
            }
          }
        );

}