如何指定我们的复选框的值答案

【问题标题】：how to specify the value of our checkbox如何指定我们的复选框的值
【发布时间】：2019-08-26 21:46:24
【问题描述】：

我希望当用户选中复选框时，值是“l.code”而不是布尔值

这是我的代码

<div class="form-group">
    <label>Critères : </label>&nbsp;
    <div class="checkbox-inline" *ngFor="let l of lesCriteres; let i= index">
      <label>
        <input type="checkbox" [value]="l.code" [(ngModel)]="actif.lesCriteresActifs[i].critere.code">{{l.code}}
      </label>
    </div>
</div>

但它不起作用！当我检查时，它给了我“true”而不是“l.code”。谢谢！

【问题讨论】：

您为什么要为此使用复选框？复选框应该用于布尔值。
因为我想让用户能够选择一个或多个选项。使用单选按钮，他只能选择一个选项
你试过value="l.code"而不是[value]="l.code"吗？
是的，没有变化
@PowerGirl stackblitz.com/edit/angular-9qkk8l 试试这个代码

标签： html angular checkbox return-value angular-ngmodel

【解决方案1】：

您可以在复选框上使用带有事件绑定的“更改”事件处理程序。

在html中

<form>
    <div *ngFor="let l of lesCriteres">
        <input type="checkbox" value="l.code" (change)="onChangeEvent($event, l.code)"> {{l.code}}<br>
    </div>
</form>

在ts中

onChangeEvent(eventValue, valueOfCheckbox){
  alert(valueOfCheckbox);
}

【讨论】：

【解决方案2】：

您可以执行以下操作：

HTML：

<div *ngFor="let data of emails">
    <input type="checkbox" [value]="data.email" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>

ts：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
emailFormArray = [];
  emails = [{ email: "email1" }, { email: "email2" }, { email: "email3" }, { email: 'email4' }]
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      useremail: this.fb.array([])
    });
  }

  onChange(email: string, isChecked: boolean) {
    if (isChecked) {
      this.emailFormArray.push(email);
    } else {
      let index = this.emailFormArray.findIndex(x =>{ 
        console.log(x);
        return x == email
        });
      console.log(index)
      this.emailFormArray.splice(index,1);
    }
    console.log(this.emailFormArray)
  }

}

STACKBLITZ

【讨论】：