Получить значения из группы флажков Угловой материал?

Question

Я пытаюсь выяснить, как получить выбранные значения из группы флажков Angular (7) Material.

Допустим, у меня есть область в форме "flavors" и 3 флажка со значениями "chocolate", "vanilla" и "strawberry".

<h3>Flavors</h3>
<mat-checkbox value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox value="strawberry">Strawberry</mat-checkbox>

Поскольку флажки установлены и отключены, я хочу обновить переменную (модель) "flavorsAvailable".

Это просто сделать с помощью mat-radio-groups, поскольку это просто ngModel для элемента group. Но как мне управлять флажками?

Примечание: я не хочу использовать список выбора угловых материалов; это только для форм.

Answer 1

@ Стив, список выбора материалов, который вы можете использовать [(ngModel)] = "variable" [formControl] = "control" или в форме formGroupName = "property".В любом случае вы получите массив с выбранными опциями.Я не представляю лучшего способа управлять флажком.

Ну, вы можете использовать только проверку матов, это только использование [(ngModel)].например, если у вас есть массив логических значений.Да, не имеет смысла [значение] в флажке, только допустимые значения: true или false

variable:boolean[]=[]

Вы можете использовать

<mat-checkbox [(ngModel)]="variable[0]" value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[1]" value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[2]" value="strawberry">Strawberry</mat-checkbox>
{{variable|json}}

Answer 2

Посмотрите, поможет ли это вам:

flavorsAvailable: any[] = [
    { 'id': '0', 'name': 'chocolate' },
    { 'id': '1', 'name': 'vanilla' }
];

getCheckeds(ev): any[] {
  return this.flavorsAvailable.filter(x => x.state = ev.target.checked);
}

Если этот тип списка вы упомянули в ", я не хочу использовать список выбора угловых материалов; это простодля форм.".Им это не имеет смысла, вам нужно будет выбрать одну за другой из 3 разных моделей ngModels ...