У меня есть набор категорий, поступающих от веб-службы: 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, все данные исчезнут.
Как мне это сделать ?





Вы близки, вам просто нужно передать 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>
Динамический флажок с примером 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>
проверьте этот ответ здесь, это может быть полезно stackoverflow.com/a/45987999/5689117