Angular如何获取多个复选框值？

Question

我在 Angular 中使用一个复选框来选择多个元素，并且我正在尝试获取该复选框的值以进行提交。

相反，我将这些值作为true-s 的数组获取。 这就是我尝试过的：

export class CreateSessionComponent implements OnInit {
  form : FormGroup ;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      userdata :  new FormArray([
        new FormControl('', Validators.required)
      ])
    })
  }
}

userdata 是从数据库填充的动态数组。

<div formArrayName="useremail; let k = index">
  <div *ngFor="let data of userdata">
    <div>
      <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
    </div>
  </div>
</div> 

Answer 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);
  }
}

Demo

Answer 2

@AJT_82 答案的问题是，如果您想使用 form.reset() 或 form.patchValue() 修改模型，它不会不工作。要解决这些问题，您需要实现ControlValueAccessor 接口。 基本上，您需要创建 2 个组件：保存模型值并实现 ControlValueAccessor 的组组件和复选框组件，即实际的复选框。 我已经写了a blog post 的详细解释，并创建了一个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
  ...
}

复选框组件：

@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);
  }
}

子复选框控件引用了组组件（@Host() 装饰器）。当一个复选框被点击toggleCheck()调用组组件上的addOrRemove()方法并且如果复选框的值已经在模型中，它被移除，否则它被添加到型号。

Answer 3

您可以获得检查数据的数组：

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

获取所有检查值

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

Answer 4

对于 Angular 2+，请查看此示例 link

Answer 5

我在加载表单自动选择的输入处执行了此功能：

[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(type)

自动检查复选框是否会被选中。

Answer 6

我用两种不同的方式解决了 一个带有简单复选框数组的 - mat-checkbox 另一个是 mat-selection-list。

帖子中的代码要点。 在该值，您可以设置所有类型的组合。 在我的例子中，我使用了 id 和 description 的连接，以便在最后从一个来源初始化表单控件..

https://medium.com/@2bhere4u/angular-5-material-design-checkbox-array-reactive-forms-handle-3885dde366ca

我的问题是在一个更简单的示例中清理复选框数组。 没有时间浪费了..继续下一个任务..:)

Answer 7

这是我的方法，我将其用于 ionic cordova Contacts 插件以从通讯录中获取多个联系人并添加选定的联系人。

HTML

<div *ngFor="let c of addressBook" tappable class="px-2">
  <input type="checkbox"  (change)="onChangeContact($event,c)">
  <p>{{ c.displayName }}</p>
 </div>

TS

onChangeContact($event, c) { 
    if ($event.target.checked) {
      this.tempArr.push(c);
    } else {
      let i: number = 0;
      this.tempArr.forEach((item: any) => {
        console.log(item);
        if (item.displayName == c.displayName) {
          this.tempArr.splice(i, 1);
          return;
        }
        i++;
      });
    }
  }