Angular如何获得多个checkbox的值？
我在angular度使用checkbox来select多个数据，即时通讯尝试获取表单上的提交checkbox的值。相反，获取值即时获取值为true.I已经尝试了下面的代码帮助我在此先感谢
export class CreatesessionComponent implements OnInit { form : FormGroup ; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.group({ useremail : new FormArray([ new FormControl('',Validators.required) ]) }); } } userdata是我将从数据库中获取的dynamic数组
<div class = "row" formArrayName="useremail; let k = index"> <div class="col-md-8 col-sm-5 col-xs-12 col-lg-8"> <div *ngFor="let data of userdata"> <div class="col-md-6"> <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}} </div> </div> </div> </div>
更新：
既然你有几个值要使用，你需要使用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); } }
更新演示
原来的post ：
在Angular中，checkbox在表单中很棘手，所以你需要做一些解决方法来获取实际值而不是true或false 。 这是一种方法。
捕获更改事件，如果checkbox被选中，请将值设置为所需的相应值的表单控件：
<input type="checkbox" name="useremail" formControlName="useremail" (change)="$event.target.checked ? (this.myForm.controls.useremail.setValue(data.email)) : false" >
与@ AJT_82答案的问题是，如果你想使用form.reset（）或form.patchValue（）修改模型，它将无法正常工作。 要解决这些问题，您需要实现ControlValueAccessor接口。 基本上你需要创build2个组件：包含模型值的组件，并实现ControlValueAccessor和checkbox组件，实际的checkbox。 我已经写了一篇详细解释的博客文章 ，并创build了一个演示一些例子的笨蛋 。
最终用法：
<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); } }
子checkbox控件引用了组件组件（ @Host（）装饰器）。 当点击一个checkbox时， toggleCheck（）调用组件组件上的addOrRemove（）方法，如果checkbox的值已经在模型中，它将被移除，否则将被添加到模型中。
你可以得到检查数据的数组：
<input .... (change)="onChange(data)" /> onChange(data){ data.checked = !data.checked; }
获取所有选中的值
let checkedValues = userdata.filter(x => x.checked).map(x => x.email);
