Как привязать выбранные значения флажка к массиву формы с помощью FormBuilder в Angular
У меня есть список флажков, и для управления формой я использую Angular FormBuilder. Я пытаюсь привязать выбранные значения флажка к элементу управления формой с именем itemIds в моей группе форм.
constructor(private formBuilder: UntypedFormBuilder
) {
}
serviceTaskForm = this.formBuilder.group({
....
itemIds : ['']
})
onCheckboxChange($event: MatLegacyCheckboxChange) {
}
В HTML я использую
<form>
.....
<mat-form-field appearance = "fill">
<div class = "demo-select-all-checkboxes" *ngFor = "let task of tasks">
<mat-checkbox
(change) = "onCheckboxChange($event)"
[value] = "task.itemId">
{{ previousTask.itemId }} {{ previousTask.invoice}}
</mat-checkbox>
</div>
</mat-form-field>
</form>
Я хочу, чтобы элемент управления формой itemIds представлял собой массив, содержащий все выбранные значения флажка. Как я могу этого добиться?
Ответы 1
Ваш элемент управления
itemIdsдолжен быть элементом управления формы со значением массива.Чтобы инициализировать элемент управления формы
itemIds, вам следует использовать методsetValue()илиpatchValueи предоставить значение массива.Для работы с несколькими флажками с помощью элемента управления формой у вас должна быть следующая реализация:
onCheckBoxChangeметод для переключения выбранного значения флажка из массива по событию (установлен/снят).isCheckedметод проверкиitemIdотмечен.
import {
MatCheckboxModule,
MatCheckboxChange,
} from '@angular/material/checkbox';
serviceTaskForm = this.formBuilder.group({
itemIds: [[]],
});
ngOnInit() {
this.itemIdFormControl.patchValue([1]);
}
onCheckboxChange($event: MatCheckboxChange, itemId: number) {
let value: number[] = this.itemIdFormControl.value;
if ($event.checked) value.push(itemId);
else value.splice(value.indexOf(itemId), 1);
this.itemIdFormControl.setValue(value, {
emitEvent: false,
});
}
isChecked(itemId: number) {
return this.itemIdFormControl.value.indexOf(itemId) > -1;
}
get itemIdFormControl() {
return this.serviceTaskForm.controls['itemIds'];
}
На ваш взгляд:
Вы не можете реализовать
<mat-checkbox>в элементе<mat-form-field>. Удалите элемент<mat-form-field>. Ссылка: Angular Material Ошибка при импорте mat-checkboxРеализуйте атрибут
[checked]вместо атрибута[value].
<ng-container class = "demo-select-all-checkboxes" *ngFor = "let task of tasks">
<mat-checkbox
(change) = "onCheckboxChange($event, task.itemId)"
[checked] = "isChecked(task.itemId)"
>
{{ task.itemId }} {{ task.invoice }}
</mat-checkbox>
</ng-container>
Привет, это возможно, нужно просто настроить метку в элементах <mat-checkbox>. Что-то вроде: <mat-checkbox ...>IdItem {{ task.itemId }} - - Invoice Number {{ task.invoice }}</mat-checkbox> . Если вы хотите отображать элементы вертикально, обязательно добавьте элемент <br /> после <mat-checkbox>. Моя демо-версия примерно обновлена с учетом ожидаемого вами результата.
Спасибо за ответ. Я хотел отобразить список флажков как <mat-select>, но это было невозможно. Есть идеи, как это сделать? Я добавил изображение списка в пост.