Заполните formArray для ввода флажка, если модель уже имеет проверенные значения (Angular 8)

Question

Я пытаюсь заполнить форму Angular информацией, уже имеющейся в моей базе данных. У меня это работает для ввода 'range' и 'text', но я не могу понять, как это сделать для 'checkbox'.

Вот пример того, что у меня есть:

this.form = this.fb.group({
      option: this.fb.group({
        numbers: this.fb.array([]),
        name: ['', Validators.required]
      }),
selectedCount = 0;
maxCount = 3;
preference = {
    options: ['West',
      'East',
      'Midwest',
      'Southwest',
      'Southeast',
      'Northeast']
  };

inArray(option: string) {
    const formArray = this.form.get('option').get('numbers') as FormArray;
    return formArray.value.includes(option);
  }

onChange(option: string, isChecked: boolean) {
    const formArray = this.preferencesForm.get('option').get('numbers') as FormArray;
    if (isChecked) {
      formArray.push(new FormControl(option));
      this.selectedCount++;
    } else {
      const index = formArray.controls.findIndex(x => x.value === option);
      formArray.removeAt(index);
      this.selectedCount--;
    }
  }

<div formGroupName="option">

    <div *ngFor="let option of preference.options">
        <input  
          type="checkbox" 
          (change)="onChange(option, $event.target.checked)"
          [disabled]="(selectedCount >= maxCount) && !inArray(option)"
          id={{option}}, name={{option}}>
        <label for='{{option}}'> {{option}} </label>
      </div>
    </div>

    <input type="text" name="name" id="name" required formControlName="name">

  </div>
</div>

Наконец, вот как я пытаюсь заполнить свою форму. У меня есть userPref, который имеет информацию из бэкэнда. Я могу заполнить поле ввода «текст», но не могу установить флажки

populateInfo() {
    const formControls = this.form.controls;
    const userPref = this.user.user_pref;  

    console.log('user ', userPref);
    console.log('pref form ', preferenceFormControls)

    formControls.option.get('name').setValue(userPref.name);
    userPref.numbers.forEach( (num) => {
      (formControls.option.get('numbers') as FormArray).push( this.fb.control(num) )
    });
  }

Это правильно заполняет «имя» с информацией userPref (показывая, что я извлекаю информацию правильно) Это добавляет к сформировать массив номеров userPref. Я вижу это на терминале браузера. Тем не менее, я понятия не имею, как показать флажок.

Это длинный пост, поэтому заранее спасибо!

Answer 1

Ваша идея немного сложна. Надеюсь, это поможет:

const dataFromBE = .... // get the data from BE
this.form = this.fb.group({
    numbers: new FormArray(this.preference.options.map(x => dataFromBE.includes(x))),
    name: new FormControl('', [Validators.require]),
});

в HTML:

<div formArrayName="numbers">
  <input  
      *ngFor="let opt of form.get('numbers').controls; let i = index"
      [formControlName]="i"
      type="checkbox" 
   />
    <label> {{preference.option[i]}} </label>
</div>

наконец, когда вы отправите форму, вы получите данные:

const value = this.form.get('numbers').value as [];
//value is an array of boolean, but if you need the value see below
console.log(value.map((x, i) => x ? this.preference.options[i] : null).filter(x => x))