Реактивный массив форм для флажков в Angular 9

У меня есть массив продуктов, которые я возвращаю на объект, который выглядит так:

{"opportunityId":2, "customer":"Graham's Motors",..."products":[{"id":1,"name":"Optoin 1","selected":false},{"id":2,"name":"Option 2","selected":false},{"id":3,"name":"Option 3","selected":true},...

У меня есть машинописный файл, который импортирует:

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

и я создаю FormGroup следующим образом:

opportunityForm = new FormGroup({
    partner: new FormControl(''),
    customer: new FormControl(''),
    ...
    products: new FormArray([])

Я использую вызов API для заполнения данных, когда они извлекаются следующим образом:

this.dataService.getOpportunity(this.id)
  .subscribe(data => {
    this.opportunityForm.setValue({
      partner: data.partner ?? '',
      customer: data.customer ?? '',
      ...
      });
    data.products.forEach(product => {
      (<FormArray>this.opportunityForm.get('products')).push(new FormControl(product));
    });

который, я думаю, правильно помещает продукты в виде массива форм. Моя проблема заключается в том, как построить html. В настоящее время это выглядит так:

<div class="col" formArrayName="products">
  <div *ngFor="let option of products; index as i" >
    <label>
      <input type="checkbox"
        name="option.name"
        value="{{option.value}}" 
        [formControlName]="i"                                       
        [checked]="option.selected"
        (change)="option.selected = !option.selected"/>
      {{option.name}}
    </label>
  </div>   
</div>

Я получаю сообщение об ошибке:

ОШИБКА Ошибка: необходимо предоставить значение для управления формой с именем: «продукты».

Но я не вижу, что я делаю неправильно. Спасибо за любую помощь. Я просто хочу показать список флажков, если они уже были выбраны (есть форма редактирования), а затем разрешить пользователю обновлять их, прежде чем они отправят форму обратно.


angular angular-forms reactive-forms
person GrahamJRoy    schedule 08.06.2020    source источник
comment
беглым взглядом я бы сказал, что formArrayName="products" должно быть formArrayName="opportunityForm.products"   -  person Rachid Oussanaa    schedule 08.06.2020
comment
спасибо, но просто выдает: ОШИБКА Ошибка: не удается найти элемент управления с именем: 'opportunityForm.products'   -  person GrahamJRoy    schedule 09.06.2020
comment
разве у вас нет члена класса opportunityForm в вашем компоненте?   -  person Rachid Oussanaa    schedule 09.06.2020
comment
просто ссылка на FormGroup в соответствии с приведенным выше кодом   -  person GrahamJRoy    schedule 09.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно объявить свою форму членом класса вашего компонента:

export class HelloComponent implements OnInit {
  opportunityForm;

      ngOnInit() {
        this.opportunityForm = new FormGroup({
          partner: new FormControl(''),
          customer: new FormControl(''),
          products: new FormArray([])
        });
      }
}

затем вы получаете к нему доступ через свой шаблон:

  <div class="col" formArrayName="opportunityForm.products">
  <div *ngFor="let option of opportunityForm.products; index as i" >
  ....
person Rachid Oussanaa    schedule 08.06.2020
comment
У меня есть код точно такой же, как у вас, и я получаю две ошибки: не удается найти элемент управления с именем: «opportunityForm.products» и необходимо указать значение для элемента управления формы с именем: «продукты». - person GrahamJRoy; 09.06.2020