Как получить доступ в шаблоне, реактивной форме, массиве в массиве

Question

Я новичок в программировании и пытаюсь понять, что я делаю неправильно.:)

Я создал реактивную форму, которая содержит массив строк, содержащий строку и массив строк.

это выглядит так:

И файл json выглядит следующим образом:

  public dbData: any =  {
    'ITEMS':[
      {
        'NAME': 'Farine',
        'QUANTITY': ['140', '60']
      }]
  };

Я прибываю, чтобы создать FormGroup правильно:

Когда я отправляюэто выглядит правильно:

Но я не могу отобразить его в шаблоне правильно: (

page.ts:

export class Form2Page implements OnInit, OnDestroy {
  itemsForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.itemsForm = new FormGroup({
      'items': new FormArray([])
    });
    console.log('From initForm', this.itemsForm);
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  onAddItems() {
    const control = new FormGroup({ name: new FormControl(''),
                                    quantity: new FormArray([])});

    (<FormArray>this.itemsForm.get('items')).push(control);
    console.log('Add From', this.itemsForm);
  }

Page.html

<ion-content>
  <div>
    {{dbData.ITEMS[0].QUANTITY[1]}}
  </div>
  <form [formGroup]="itemsForm" (ngSubmit)="onFormSubmit()">

    <ion-button type="button" (click)="onAddItems()">New Item</ion-button>

    <div formArrayName="items">
      <div *ngFor="let itemsCtrl of itemsForm.get('items').controls; let i=index">
        <h4>ITEMS</h4>

        <div [formGroupName]="i">
          <ion-label>Name :
            <input type="text" formControlName="name">
          </ion-label>
          <br>
          <div formArrayName="quantity">
            <div *ngFor="let quantityCtrl of itemsForm.get('items').controls.get('quantity').controls; let j = index">
              <ion-label>Quantity :
                <input type="text" [formControlName]="j">
              </ion-label>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ion-button type="submit">Submit</ion-button>
  </form>
</ion-content>

Спасибо за помощь:)

Answer 1

В вашем коде есть несколько проблем

см. Фиксированный код здесь

• Вам необходимо добавить элементы управления / форму в массив,одного пустого массива формы недостаточно

• Для загрузки данных в форму вам нужно немного реорганизовать, потому что вам нужно перебрать элементы и добавить элемент управления / форму кваш массив

Answer 2

Я не реализовал в Ionic. Но вы можете использовать ту же самую вещь в Ionic:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

export interface Data {
  ITEMS: Array<Item>;
}

export interface Item {
  NAME: string;
  QUANTITY: Array<string>;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dbData: Data = {
    'ITEMS': [
      {
        'NAME': 'Farine',
        'QUANTITY': ['140', '60']
      }]
  };

  itemsForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = new FormGroup({
      'ITEMS': this.formBuilder.array(this.dbData.ITEMS.map(item => this.createItem(item)))
    });
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  onAddItems() {
    (<FormArray>this.itemsForm.get('ITEMS')).push(this.createItem({ NAME: '', QUANTITY: [] }));
  }

  addQuantity(i) {
    (<FormArray>(<FormArray>this.itemsForm.get('ITEMS')).at(i).get('QUANTITY')).push(this.formBuilder.control(''));
  }

  private createItem(item: Item) {
    return this.formBuilder.group({
      NAME: [item.NAME],
      QUANTITY: this.formBuilder.array(item.QUANTITY.map(item => this.formBuilder.control(item)))
    });
  }

}

И в шаблоне:

<code><pre>{{ itemsForm.value | json }}

Новый элемент

ТЕМА

Имя:

Количество:

Добавить количество

Отправить

---

Вот Рабочий образец StackBlitz для вашей ссылки.