时间戳

首页 > 解决方案 > 创建具有多个表单数组的表

angular - 创建具有多个表单数组的表

问题描述

我想创建一个像下面这样的表格，这是一个 angular 2+ 的可编辑表格。从用户那里我会得到成人计数、儿童计数和婴儿计数。

 **#          First name    Last name   Age**
    Adult 1   fn1           Ln16        Dec 27
    Adult 2   fn2           Ln15        Dec 27
    Adult 3   fn3           Ln14        Dec 27
    Child 1   fn4           Ln13        Dec 27
    Child 2   fn5           Ln12        Dec 27
    Infant 1  fn6           Ln11        Dec 27

通过使用输入，我将构建像

   ngOnInit() {
        this.travellerForm=this.formBuilder.group({
          adults: this.formBuilder.array([]),
          children: this.formBuilder.array([]),
          infant: this.formBuilder.array([])
        })
        const control1 = this.travellerForm.controls['adults'] as FormArray;
        for (let i = 0; i < this.adultCount; i++) {
          control1.push(this.adultForm());
        }
        const control2 = this.travellerForm.controls['children'] as FormArray;
        for (let i = 0; i < this.childCount; i++) {
          control2.push(this.childForm());
        }
        const control3 = this.travellerForm.controls['infant'] as FormArray;
        for (let i = 0; i < this.infantCount; i++) {
          control3.push(this.infantForm());
        }
      }

      adultForm() {
        let d = new Date();
        d.setFullYear(d.getFullYear() - 12);
        return this.formBuilder.group({
          first_name  : [''],
          last_name : [''],
          dob: [new Date(d)],
        });
      }
      childForm() {
        let d = new Date();
        d.setFullYear(d.getFullYear() - 2);
        return this.formBuilder.group({
          first_name  : [''],
          last_name : [''],
          dob: [new Date(d)],
        });
      }
        infantForm() {
          let d = new Date();
          d.setFullYear(d.getFullYear() - 2);
          return this.formBuilder.group({
            first_name  : [''],
            last_name : [''],
            dob: [new Date(d)],
          });
      }

html就像

<form [formGroup]="travellerForm" class="form-horizontal">
      <div class="table-responsive">
        <table class="table table-bordered table-striped table-highlight">
          <thead>
            <th>#</th>

            <th>First Name</th>
            <th>Last Name</th>
            <th>DOB</th>
                         </thead>
          <tbody>
            <tr *ngFor="
                        let Y of travellerForm['controls’].children[
                          'controls'
                        ];
                        let ix = index
                      " [formGroupName]="ix">
              <td>Adult 1</td>

              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" bsDatepicker #dp1="bsDatepicker" /></td>


            </tr>

            <tr *ngFor="
                        let Y of travellerForm['controls'].adults[
                          'controls'
                        ];
                        let ix = index
                      " [formGroupName]="ix">
              <td>Adult 1</td>

              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" bsDatepicker #dp1="bsDatepicker" /></td>


            </tr>

            <tr *ngFor="
                        let Y of travellerForm['controls’].infants[
                          'controls'
                        ];
                        let ix = index
                      " [formGroupName]="ix">
              <td>Adult 1</td>

              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" /></td>
              <td><input type="text" class="form-control" bsDatepicker #dp1="bsDatepicker" /></td>


            </tr>

          </tbody>
        </table>
      </div>
    </form>

它给出“找不到具有未指定名称属性的控件”错误。我怎样才能解决它并有一个像上面这样的表格。

标签： angularformshtml-table

解决方案

您的组中缺少 formArrayNames

 <ng-container formArrayName="children">
        <tr *ngFor="
                    let Y of travellerForm['controls’].children[
                      'controls'
                    ];
                    let ix = index
                  " [formGroupName]="ix">
          <td>Adult 1</td>

          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" /></td>
          <td><input type="text" class="form-control" bsDatepicker #dp1="bsDatepicker" /></td>
        </tr>
</ng-container>

只需更改所有这些，它应该可以正常工作。我会将 *ngFor 更改为

travellerForm.get('children').controls

因为它更干净。

您将需要对每个表单数组进行相应的更改。我只为孩子做的例子。

当您使用 formArrays 正确实现它们时，您需要记住如何使用对象访问普通数组

示例数组用户 = [{name:'Jack', age:20}, {name:'Peter', age:29}]

users[0] 访问位置 0 上的用户

formArrayName 是用户，formGroup 是 0（或来自 *ngFor 的 i），因此：

 <form [formGroup]="form">
    <div formArrayName="users">
     <div *ngFor="let user of form.get('users').controls; let i = index">
      <div [formGroupName]="i">
         /*user at position i*/
      </div>
     </div>
    </div>
</form>

推荐阅读