Как установить и прочитать данные в Angular реактивную форму? - PullRequest
Новая
       0

Как установить и прочитать данные в Angular реактивную форму?

0 голосов
/ 06 февраля 2020

Я пытаюсь перебрать HTML с двумя массивами. Но почему-то я не могу получить доступ ко второму массиву в нем. Вот данные: 

{
    "id": "bankloandeal@test.ba",
    "businessType": "",
    "phone": "555333",
    "email": "test@gmail.com",
    "webSiteUrl": "http://www/",
    "defaultCurrencyIso": "USD",
    "isPublished": "false",
    "publicUrl": null,
    "address": {
        "type": "home",
        "postOfficeBox": "",
        "street": "new broj 3",
        "city": "new york",
        "state": "Somewhere",
        "countryOrRegion": "Somewhere",
        "postalCode": "72000"
    },
    "businessHours": [
        {
            "day": "monday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "11:00:00.0000000"
                },
                {
                    "start": "12:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "tuesday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "wednesday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "thursday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "friday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "saturday",
            "timeSlots": []
        },
        {
            "day": "sunday",
            "timeSlots": []
        }
    ],
    "schedulingPolicy": {
        "timeSlotInterval": "PT30M",
        "minimumLeadTime": "P1D",
        "maximumAdvance": "P365D",
        "sendConfirmationsToOwner": true,
        "allowStaffSelection": true
    },
    "displayName": "bank loan deal"
}

Я пытаюсь войти в businessHours, а затем в timeSlots.

Отображение дней

с этим кодом 

<div formArrayName="businessHours">
    <div *ngFor="let businessDays of booking.get('businessHours')['controls'];let i = index;" [formGroupName]="i">
        <input type="text" formControlName="day" class="clr-input" readonly>
        <ng-container formArrayName="timeSlots">
            <div *ngFor="let time of businessDays;let j = index;" [formGroupName]="j">
                {{j+1}}
                <input class="clr-input" type="text" formControlName="start">
                <input class="clr-input" type="text" formControlName="end">
            </div>
        </ng-container>
        <clr-icon shape="plus"></clr-icon>
    </div>
</div>

Также, когда я добавляю ко второму ngFor то же самое, что и в первом только с timeSlots, я получаю сообщение об ошибке, что его неопределенный элемент управления. А также я получаю сообщение об ошибке:

Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы.

Также, когда я нажимаю кнопку отправки в этой форме, я сохраняю эти данные, но не могу показать их в передней части.

Вот так я создаю форму 

  createForm(): void {
    this.booking = this.formBuilder.group({
      id: [''],
      businessType: [''],
      phone: [''],
      email: [''],
      webSiteUrl: [''],
      defaultCurrencyIso: [''],
      publicUrl: [''],
      type: [],
      city: [''],
      street: [''],
      countryOrRegion: [''],
      state: [''],
      postalCode: [''],
      businessHours: this.formBuilder.array([]),
      timeSlotInterval: [''],
      minimumLeadTime: [''],
      maximumAdvance: [''],
      sendConfirmationsToOwner: true,
      allowStaffSelection: true,
      displayName: [''],
      isPublished: []
    });
  }
...