角如何获取多个复选框的值？

Question

我正在使用Angular中的复选框来选择多个数据，并尝试获取表单提交中复选框的值。而不是将值im作为真实值获取。我尝试了以下代码来帮助我提前感谢

   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是动态数组，我将从数据库中获取

<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> 

Answer 1

由于您要使用多个值，因此需要使用FormArray，因为FormControl只能捕获一个值。首先声明一个空的formArray：this.myForm = this.fb.group({&nbsp; useremail: this.fb.array([])});迭代您的电子邮件，并查看change事件，并将相应的电子邮件和事件传递给onChange您检查方法是否为的方法checked，然后将相应的电子邮件添加到formarray，如果未选中，则从表单数组中删除所选的电子邮件：<div *ngFor="let data of emails">&nbsp; <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br></div>和onChange：onChange(email:string, isChecked: boolean) {&nbsp; const emailFormArray = <FormArray>this.myForm.controls.useremail;&nbsp; if(isChecked) {&nbsp; &nbsp; emailFormArray.push(new FormControl(email));&nbsp; } else {&nbsp; &nbsp; let index = emailFormArray.controls.findIndex(x => x.value == email)&nbsp; &nbsp; emailFormArray.removeAt(index);&nbsp; }}

Answer 2

如果您想使用form.reset（）或form.patchValue（）修改模型，则它将无法正常工作。要解决这些问题，您需要实现ControlValueAccessor接口。基本上，您需要创建2个组件：组组件，该组件保存模型值并实现ControlValueAccessor和复选框组件，即实际复选框。我写了一篇博客文章，上面有详细的解释，还创建了一个演示一些示例的插件。最终用法：<checkbox-group [(ngModel)]="selectedItems">&nbsp; &nbsp; <checkbox value="item1">Item 1</checkbox>&nbsp; &nbsp; <checkbox value="item2">Item 2</checkbox>&nbsp; &nbsp; <checkbox value="item3">Item 3</checkbox>&nbsp; &nbsp; <checkbox value="item4">Item 4</checkbox></checkbox-group>组组件的实现：@Component({selector: 'checkbox-group',template: `<ng-content></ng-content>`,providers: [{&nbsp; &nbsp; &nbsp; provide: NG_VALUE_ACCESSOR,&nbsp; &nbsp; &nbsp; useExisting: forwardRef(() => CheckboxGroupComponent),&nbsp; &nbsp; &nbsp; multi: true&nbsp; &nbsp; }]&nbsp;})export class CheckboxGroupComponent implements ControlValueAccessor {&nbsp; private _model: any;&nbsp; // here goes implementation of ControlValueAccessor&nbsp; ...&nbsp; addOrRemove(value: any) {&nbsp; &nbsp; if (this.contains(value)) {&nbsp; &nbsp; &nbsp; &nbsp; this.remove(value);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.add(value);&nbsp; &nbsp; }&nbsp; }&nbsp; contains(value: any): boolean {&nbsp; &nbsp; if (this._model instanceof Array) {&nbsp; &nbsp; &nbsp; &nbsp; return this._model.indexOf(value) > -1;&nbsp; &nbsp; } else if (!!this._model) {&nbsp; &nbsp; &nbsp; &nbsp; return this._model === value;&nbsp; &nbsp; }&nbsp; &nbsp; return false;&nbsp; }&nbsp; // implementation for add and remove&nbsp; ...}复选框组件：@Component({selector: 'checkbox',template: `&nbsp; <div (click)="toggleCheck()">&nbsp; &nbsp; <input type="checkbox" [checked]="isChecked()" />&nbsp; &nbsp; <ng-content></ng-content>&nbsp; </div>`})export class CheckboxComponent {&nbsp; @Input() value: any;&nbsp; constructor(@Host() private checkboxGroup: CheckboxGroupComponent) {&nbsp; }&nbsp; toggleCheck() {&nbsp; &nbsp; this.checkboxGroup.addOrRemove(this.value);&nbsp; }&nbsp; isChecked() {&nbsp; &nbsp; return this.checkboxGroup.contains(this.value);&nbsp; }}子复选框控件引用了组组件（@Host（）装饰器）。当复选框被点击toggleCheck（）调用addOrRemove（）方法组部件上，并且如果复选框的值已经在模型，它被删除，否则，它被添加到模型中。