Angular 4复选框更改值

Question

如何在Angular 4中实现当您在复选框中注册时保存"A"或"B"值.尽我所能,他只是送我真假,我希望有人可以帮助我.

registry.component.ts

  this.userForm = new FormGroup({
   state: new FormControl('',),

  });

registry.component.html

<div class="form-group">
                <label>State</label>
          <input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
        </div>  

            <pre>{{userForm.value | json}}</pre>

这样我可以让控制台显示我想要的值(A或B),但在JSON中仍然是真或假.

Answer 1

这就是你要找的东西:

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />

在课堂上:

checkValue(event: any){
   console.log(event);
}

还包括FormsModule app.module.ts以使ngModel工作!

希望能帮助到你!

Answer 2

尝试一下,

模板

<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>

Ts文件

FieldsChange(values:any){
console.log(values.currentTarget.checked);
}

Answer 3

我们可以做如下。我用的是角度12。

[网页]

<input type="checkbox" formControlName="lock" (change)="changeStatus($event)" />

[TS]

changeStatus(event:Event){
    const isChecked = (<HTMLInputElement>event.target).checked;
    console.log(isChecked)
}

Answer 4

changed = (evt) => {    
this.isChecked = evt.target.checked;
}

<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>

Answer 5

另一种方法是使用ngModelChange：

模板：

<input type="checkbox" ngModel (ngModelChange)="onChecked(obj, $event)" />

控制器：

onChecked(obj: any, isChecked: boolean){
  console.log(obj, isChecked); // {}, true || false
}

我更喜欢这种方法，因为在这里您可以获得复选框的相关对象和true/false值。

Answer 6

这对我有用，角度 9：

component.html 文件：

<mat-checkbox (change)="checkValue($event)">text</mat-checkbox>

component.ts 文件：

checkValue(e){console.log(e.target.checked);}

Answer 7

我想这就是您要实现的目标。

<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B

click(ev){
   console.log(ev.target.defaultValue);
}

Answer 8

你可以使用这个：

<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">

在你的 ts 文件中，

changeStatus(id, e) {
    var status = e.target.checked;
    this.yourseverice.changeStatus(id, status).subscribe(result => {
        if (status)
            this.notify.success(this.l('AddedAsKeyPeople'));
        else
            this.notify.success(this.l('RemovedFromKeyPeople'));

    });
}

这里，record是当前行的模型，status是布尔值。