how could you achieve in Angular 4 that when you register in a checkbox save an "A" or "B" value. As much as I try, he is only sending me true or false, I hope someone can help me.
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>
That way I can get the console to show the value I want (A or B) but in the JSON is still true or false.
This question is related to
angular
typescript
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);
}
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.
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
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)}
try this worked for me :
checkValue(event: any) {
this.siteSelected.majeur = event;
}
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);
}
Source: Stackoverflow.com