создание таблицы с несколькими форматами

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 для их правильной реализации, вам нужно помнить, как вы обращаетесь к обычным массивам с объектами

пример массива users = [{name: 'Jack', age: 20}, {name: 'Peter', age: 29}]

пользователи [0] для доступа к пользователю на позиции 0

formArrayName - это пользователи, formGroup - 0 (или i из * ngFor), следовательно:

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