Angular 4复选框更改值

时间:2017-11-02 05:30:58

标签: angular rest typescript

你怎么能在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中仍然是真或假。

9 个答案:

答案 0 :(得分:37)

这就是你要找的东西:

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

在课堂上:

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

还在app.module.ts中加入FormsModule以使ngModel正常工作!

希望它有帮助!

答案 1 :(得分:20)

尝试一下,

<强>模板

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

Ts档案

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

答案 2 :(得分:10)

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

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

答案 3 :(得分:2)

我猜这是你想要实现的目标。

method title

答案 4 :(得分:1)

另一种方法是使用ngModelChange

模板:

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

控制器:

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

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

答案 5 :(得分:1)

这对我有用,角度9:

component.html文件:

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

component.ts文件:

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

答案 6 :(得分:0)

您可以使用此:

<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'));

    });
}

这里,记录是当前行的模型,状态是布尔值。

答案 7 :(得分:0)

尝试一下对我有用:

checkValue(event: any) {
    this.siteSelected.majeur = event;
}

答案 8 :(得分:0)

在组件类内部:

checkValue(event: any) {
  this.userForm.patchValue({
    state: event
  })
}

现在控件中的值是A或B