Question

我想创建一个如下表，它是角度为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>

出现“找不到具有未指定名称属性的控件”错误。我该如何解决它并拥有一个像上面的表格。

Answer 1

您在组中缺少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>

创建具有多个formarrays的表

1 个答案: