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

Question

我使用angular中的复选框来选择多个数据并且我试图在表单上获取复选框的值.相反,获取值im得到的值为true.我试过以下代码帮我提前谢谢

   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

由于您要使用多个值,因此需要使用a 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);
  }
}

演示

Answer 2

@ AJT_82答案的问题是,如果要使用form.reset()或form.patchValue()修改模型,它将无法工作.要解决这些问题,您需要实现ControlValueAccessor接口.基本上你需要创建2个组件:group组件,它保存模型值并实现ControlValueAccessor和checkbox组件,实际的复选框.我写了一篇博客文章,详细解释,并创建了一个演示一些例子的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()组部件上的方法,并且如果复选框的值已经在模型,它被删除,否则,它被添加到模型中.