Несколько ошибок - FormGroup ожидает экземпляр FormGroup - Форма работает нормально, но в консоли отображается несколько ошибок - PullRequest
Новая
       23

Несколько ошибок - FormGroup ожидает экземпляр FormGroup - Форма работает нормально, но в консоли отображается несколько ошибок

0 голосов
/ 10 июня 2019

У меня есть форма, которая отлично работает после задержки 3 секунды.За эти 3 секунды форма заполняется множеством ошибок по счету 15:

formGroup expects a FormGroup instance. Please pass one

Cannot read property 'get' of undefined

Я понимаю, что заполнение формыосновано на том факте, что API Call успешен и ответ возвращается.Пока ответа нет, форма не определена, а следовательно, и ошибки.

Вопрос: Что нужно сделать, чтобы избавиться от этой проблемы, и наилучший из возможных способов сделать это

Шаблон HTML 

  <div [formGroup]="productForm">
        <div class="r-package-list" formArrayName="packages">
          <div
            class="r-package-list-item"
            *ngFor="let package of packageForms.controls; let i = index"
            [formGroupName]="i"
          >
            <div class="formArrayControlDiv">
              <label class="Package-Name-Label"
                ><input
                  type="checkbox"
                  class="Package-Selection-Checkbox"
                  formControlName="packageCheckBox"
                />
              </label>
              <input
                type="number"
                formControlName="packageQuantity"
              />
              <input
                readonly
                type="text"
                formControlName="packagePrice"
              />
            </div>
          </div>
        </div>
      </div>

Файл TS 

  ngOnInit() {

    this.apiService.getPackages(id).then((result: any) => {
        this.createForm(result.data);
      });

  }


  // Creating a Product Form
  createForm(data) {
    const arr = [];

    for (let i = 0; i < data.length; i++) {
      arr.push(this.packageArrayFunction(data[i]));
    }

    this.productForm = this.fb.group({
      packages: this.fb.array(arr)
    });
  }

  // Creating a Dynamic Package Array
  packageArrayFunction(packages): FormGroup {
    return this.fb.group({
      packageCheckBox: [false],
      packageQuantity: [''],
      packagePrice: [packages.basic_price + '/' + packages.base_unit]
    });
  }

  get packageForms() {
    return this.productForm.get('packages') as FormArray;
  }
...