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

由于您要使用多个值，因此需要使用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（）修改模型，它会赢得＆＃ 39;工作。要解决这些问题，您需要实现ControlValueAccessor接口。基本上你需要创建2个组件：group组件，它保存模型值并实现ControlValueAccessor和checkbox组件，实际的复选框。我写了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

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

[选中] =＆＃34; this.selected？ this.selected.type.includes（type）：false＆＃34;

完整代码：

<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（类型）

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

Answer 5

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

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

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

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

Answer 6

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

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

6 个答案:

Demo