角度4复选框更改值

如何实现在角度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 中仍然是真或假。

285435 次浏览
小开

I am guessing that this is what something you are trying to achieve.

<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);
}
小开

Give a try on this,

Template

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

Ts File

fieldsChange(values:any):void {
console.log(values.currentTarget.checked);
}
小开
最佳答案

This it what you are looking for: 

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

Inside your class:

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

Also include FormsModule in app.module.ts to make ngModel work !

Hope it Helps!

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


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

You can use this:

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

And on your ts file,

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


});
}

Here, record is the model for current row and status is boolean value.

小开

Another approach is to use ngModelChange:

Template:

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

Controller:

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

I prefer this method because here you get the relevant object and true/false values of a checkbox.

小开

try this worked for me : 

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

Inside your component class:

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

Now in controls you have value A or B

小开

This works for me, angular 9:

component.html file:

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

component.ts file:

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

We can do below. I am using angular 12.

[Html]

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

[TS]

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

You can use form controller valueChanges() listener and subscribe for its events, for example

On your controller or .ts file

constructor(private _formBuilder: FormBuilder) { }


ngOnInit(): void {
this.yourForm = this.createFrom();
this.listenForCheckboxChanges();
           

}


private createFrom() {
return this._formBuilder.group(
{
CheckBox:[false],
    

})
}


get yourCheckbox(){
return this.conservationForm.controls['CheckBox'];
}


listenForCheckboxChanges() {
this.yourCheckbox.valueChanges.subscribe(res=>{
//console vaule of checkbox
console.log(res)
});
}

on your view or .htm file

<div  [formGroup]="yourForm" fxLayoutGap="12px">
<mat-checkbox  formControlName="CheckBox">Checkbox!</mat-checkbox>
</div>

提交答案