Как мне обрабатывать свой динамический флажок с Angular 6

У меня есть набор категорий, поступающих от веб-службы: categories, и массив с выбранными категориями: selectedCategories

Чтобы отобразить все флажки, я делаю:

<form [formGroup] = "formGroup" (ngSubmit) = "onSubmit()">
  <div class = "row">
    <div *ngFor = "let category of categories">
      <input type = "checkbox" class = "custom-control-input" [id] = "category.id" formControlName = "category"
             [checked] = "categoriesSelected?.includes(category.id)">
      <label class = "custom-control-label" [for] = "category.id">{{ category.name | translate }}</label>
    </div>
  </div>
</form>

это отлично работает.

Затем я создаю свою formGroup:

ngOnInit() {
    this.categoriesSelected = this.championships.map(championship => championship.category.id);
    this.formGroup = this.formBuilder.group({
      categories: this.formBuilder.array([{}])
    });
  }

Теперь мне нужны только идентификаторы выбранных категорий.

Я немного не понимаю, как связать formBuilder и formGroup.

Если я добавлю formControlName = "categories" в свой шаблон в теге input, все данные исчезнут.

Как мне это сделать ?

проверьте этот ответ здесь, это может быть полезно stackoverflow.com/a/45987999/5689117

pau 12.06.2018 16:55
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
1
21 245
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы близки, вам просто нужно передать categoriesSelected в this.formBuilder.array() и внести небольшие изменения в разметку. В вашем компоненте:

  constructor(private formBuilder: FormBuilder) {
    this.myGroup = this.formBuilder.group({
      myCategory: this.formBuilder.array(this.categoriesSelected)
    });
  }

Вы можете использовать индекс ngFor для доступа к отдельному массиву categories для маркировки флажков:

<form [formGroup] = "myGroup">
    <div *ngFor = "let category of myGroup.controls['myCategory'].controls; let i = index">
        <input type = "checkbox" [formControl] = "category">
    <label>{{ categories[i].name }}</label>
    </div>
  Selected: <strong>{{ myGroup.get('myCategory').value }}</strong>
</form>

Демо: https://stackblitz.com/edit/angular-vntktv

Динамический флажок с примером Angular

 musicForm: FormGroup;
 musicPreferences = [
 { id: 1, genre: 'Pop' },
 { id: 2, genre: 'Rock' },
 { id: 3, genre: 'Techno' },
 { id: 4, genre: 'Hiphop' }
 ];

 this.musicForm.get('selectAll').valueChanges.subscribe(bool => {
    this.musicForm
      .get('musicPreferences')
      .patchValue(Array(this.musicPreferences.length).fill(bool), { emitEvent: 
 false });
  });
 this.musicForm.get('musicPreferences').valueChanges.subscribe(val => {
  const allSelected = val.every(bool => bool);
  if (this.musicForm.get('selectAll').value !== allSelected) {
    this.musicForm.get('selectAll').patchValue(allSelected, { emitEvent: false 
 });
  }
});


  submit() {
// Filter out the unselected ids
const selectedPreferences = this.musicForm.value.musicPreferences
  .map((checked, index) => checked ? this.musicPreferences[index].id : null)
  .filter(value => value !== null);
// Do something with the result

}

   <form [formGroup] = "musicForm" (ngSubmit) = "submit()">
   <label>
    <input type = "checkbox" formControlName = "selectAll">
 Select/Deselect all
  </label>
  <label formArrayName = "musicPreferences" *ngFor = "let genre of 
   musicForm.controls['musicPreferences'].controls; let i = index">
  <input type = "checkbox" [formControlName] = "i">
  {{musicPreferences[i].genre}}
  </label>

  <button>submit</button>
  </form>

Другие вопросы по теме