Angular как получить многократное значение флажка?

Ответ 1

ОБНОВЛЕНИЕ:

Поскольку у вас есть несколько значений, которые вы хотите использовать, вам нужно использовать FormArray, так как FormControl может захватывать только одно значение.

Начните с объявления пустого formArray:

this.myForm = this.fb.group({
  useremail: this.fb.array([])
});

Итерируйте свои электронные письма и следите за событием изменения и передавайте соответствующее сообщение и событие методу onChange, где вы проверяете, если он checked, а затем добавьте соответствующее письмо в formarray, если он не установлен, удалите выбранное электронное письмо из массива форм:

<div *ngFor="let data of emails">
  <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>

И onChange:

onChange(email:string, isChecked: boolean) {
  const emailFormArray = <FormArray>this.myForm.controls.useremail;

  if(isChecked) {
    emailFormArray.push(new FormControl(email));
  } else {
    let index = emailFormArray.controls.findIndex(x => x.value == email)
    emailFormArray.removeAt(index);
  }
}

Обновлено демо

ОРИГИНАЛЬНАЯ ПОЧТА:

В Angular флажки сложны в формах, поэтому вам нужно сделать некоторое обходное решение, чтобы получить фактическое значение вместо true или false. Здесь один путь.

Захватите событие изменения, и если флажок установлен, установите значение в элемент управления формы с нужным значением:

<input type="checkbox" name="useremail" formControlName="useremail"
   (change)="$event.target.checked ? (this.myForm.controls.useremail.setValue(data.email)) : false" >  

Ответ 2

Проблема с ответом @AJT_82 заключается в том, что если вы хотите изменить модель, используя form.reset() или или form.patchValue(), это не сработает. Чтобы решить эти проблемы, вам необходимо реализовать ControlValueAccessor интерфейс. В основном вам необходимо создать 2 компонента: групповой компонент, который содержит значение модели и реализует компонент ControlValueAccessor и флажок, фактический флажок. Я написал сообщение в блоге с подробным объяснением, а также создал plunker, которые демонстрируют некоторые примеры.

Конечное использование:

<checkbox-group [(ngModel)]="selectedItems">
    <checkbox value="item1">Item 1</checkbox>
    <checkbox value="item2">Item 2</checkbox>
    <checkbox value="item3">Item 3</checkbox>
    <checkbox value="item4">Item 4</checkbox>
</checkbox-group>

Реализация группового компонента:

@Component({
selector: 'checkbox-group',
template: `<ng-content></ng-content>`,
providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxGroupComponent),
      multi: true
    }]
 })
export class CheckboxGroupComponent implements ControlValueAccessor {
  private _model: any;

  // here goes implementation of ControlValueAccessor
  ...

  addOrRemove(value: any) {
    if (this.contains(value)) {
        this.remove(value);
    } else {
        this.add(value);
    }
  }

  contains(value: any): boolean {
    if (this._model instanceof Array) {
        return this._model.indexOf(value) > -1;
    } else if (!!this._model) {
        return this._model === value;
    }

    return false;
  }

  // implementation for add and remove
  ...
}

Элемент checkbox:

@Component({
selector: 'checkbox',
template: `
  <div (click)="toggleCheck()">
    <input type="checkbox" [checked]="isChecked()" />
    <ng-content></ng-content>
  </div>`
})
export class CheckboxComponent {
  @Input() value: any;

  constructor(@Host() private checkboxGroup: CheckboxGroupComponent) {
  }

  toggleCheck() {
    this.checkboxGroup.addOrRemove(this.value);
  }

  isChecked() {
    return this.checkboxGroup.contains(this.value);
  }
}

Элементы управления флажком Child имеют ссылку на компонент группы (декоратор @Host()). При щелчке по кнопке toggleCheck() вызывается метод addOrRemove() для компонента группы, и если значение флажка уже находится в модели, оно удаляется, в противном случае оно добавляется в модель.

Ответ 3

Вы можете получить массив проверенных данных:

<input .... (change)="onChange(data)" />
onChange(data){
   data.checked = !data.checked;
}

чтобы получить все проверенное значение

let checkedValues = userdata.filter(x => x.checked).map(x => x.email);

Ответ 4

Я сделал эту функцию на входе для автоматического выбора формы загрузки:

[checked] = "this.selected? this.selected.type.includes(type): false"

Полный код:

<label *ngFor="let type of this.entityType" class="checkbox-inline c-checkbox">
<input type="checkbox" [checked]="this.selected? this.selected.type.includes(type) : false" (change)="onChangeEntityType(type, $event.target.checked)"/>
<span class="fa fa-check"></span>{{type | translate}}</label>

Где

this.selected

- мой объект и

this.selected.type.includes(тип)

автоматически проверьте, будут ли отмечены флажки.