Не удается найти элемент управления с путем: «планы -> 0»

Question

У меня есть API, который возвращает данные примерно так, но класс такой же, но количество записей меняется.

HTML файл:

<div class="col-12 col-md-6" formArrayName="plans">
  <div class="form-check" 
      *ngFor="let plan of plans; index as i" [formGroupName]="i">
    <label class="form-check-label fw7 h5 mb0">
      <input class="form-check-input" type="checkbox" formControlName="checkbox">
      {{plan.planCode}}
    </label>

    <label *ngIf="plan.divisions.length > 0">
      Divisions
      <select class="form-control" formControlName="division">
        <option *ngFor="let division of plan.divisions" [value]="division.divisionCode">
          {{division.divisionName}}
        </option>
      </select>
    </label>
  </div>         
</div>

Файл TS:

public plans: IPlan[] = new Array<Plan>();
public formControls: {
  firstNameCtrl: FormControl,    
  plans: {
    checkbox: FormControl;
    division: FormControl;
  }[]
};

ngOnInit() {
  this.restSvc.getData("/api/plan/GetPlanDetails")
    .subscribe((data => {
      if (!data.errorMessage) {
        this.plans = data;          
      } else {
        this.errMsg = data.errorMessage;
      }
    }), error => {
      this.errMsg = "We found some errors. Please review the form and make corrections.";
  });

  this.formControls = {
    firstNameCtrl: this.fb.control('', Validators.required),   
    plans: this.plans.map((plan, i) => {
      const divisionCode = plan.divisions.length > 0
        ? plan.divisions[0].divisionCode
        : '';
      return {
        checkbox: this.fb.control(i === 0),
        division: this.fb.control(divisionCode)
      };
    })
  };
}

Я получаю ошибку

Не удается найти элемент управления с путем: 'планы -> 0'

, где план сопоставляется до завершения подписки , Как решить эту проблему?

Пример данных:

plans = [ 
  { planCode: "B3692", divisions: [] }, 
  { planCode: "B3693", divisions: [] }, 
  { planCode: "B67", 
    divisions: [ 
      { divisionCode: "2", divisionName: "Assisted Living " }, 
      { divisionCode: "1", divisionName: "LILC" }] 
  }, 
  { planCode: "B69", 
    divisions: [ 
      { divisionCode: "3", divisionName: "Four Seasons" }, 
      { divisionCode: "2", divisionName: "Lakeside" }, 
      { divisionCode: "1", divisionName: "Sunrise" } ] 
  } 
];

Answer 1

Вам нужно создать свою форму после того, как ваша служба вернет данные.

Подумайте о своей функции ngOnInit поэтапно.

1. Запрос данных
2. Сборка form
3. Построить массив форм из пустого plans array
4. HTML build

...

Служба возвращает данные Обновление plans массив HTML обновляется

Теперь у вас есть ситуация, когда *ngFor="let plan of plans" создает блок HTML для каждого plan, но вы не добавили никаких элементов управления форм в свой массив form.plans. Поэтому, когда форма пытается привязаться к первому элементу управления формы в form.plans, она ничего не находит и ломается.

Как решить эту проблему?

Главная проблема здесь заключается в том, что ваша Массив формы всегда должен отражать модель, из которой вы его строите, иначе разница в длине массива вызовет проблемы.

Насколько я могу судить, нет особого смысла в отображении частичного Форма в ожидании службы, чтобы вернуть планы. Поэтому я бы порекомендовал отложить создание формы, пока у вас не будут все данные. Это можно сделать, построив форму изнутри подписки.

// no point in initialising with an empty array
plans: IPlan[];
formControls: {
  firstNameCtrl: FormControl,    
  plans: {
    checkbox: FormControl;
    division: FormControl;
  }[]
};

ngOnInit() {
  this.restSvc.getData("/api/plan/GetPlanDetails").subscribe(plans => {
    if (!plans.errorMessage) {
      this.plans = plans;
      this.buildForm();
    } else {
      this.errMsg = plans.errorMessage;
    }
  }, error => {
    this.errMsg = "We found some errors. Please review the form and make corrections.";
  });  
}

private buildForm(): void {
  this.formControls = {
    firstNameCtrl: this.fb.control('', Validators.required),   
    plans: this.plans.map((plan, i) => {
      const divisionCode = plan.divisions.length > 0
        ? plan.divisions[0].divisionCode
        : '';
      return {
        checkbox: this.fb.control(i === 0),
        division: this.fb.control(divisionCode)
      };
    })
  };

  // TODO: build the form here
}

Теперь вам нужно будет контролировать, когда ваша форма добавляется в DOM, поскольку у вас не будет формы для ее привязки к когда он изначально построен.

<form *ngIf="form" [formGroup]="form">
  <!-- the form -->
</form>