CODEWITHSUNDEEP
angulartypescript
J. Edu
J. Edu

Reputation: 1173

Angular 4 checkbox change value

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.

Upvotes: 116

Views: 358120

Answers (11)

Eyayu Tefera
Eyayu Tefera

Reputation: 931

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>

Upvotes: 0

ProgIn
ProgIn

Reputation: 341

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)
}

Upvotes: 20

Shubham
Shubham

Reputation: 177

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

Upvotes: 7

balajivaishnav
balajivaishnav

Reputation: 2893

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

Upvotes: 112

Chetan Upreti
Chetan Upreti

Reputation: 1

Inside your component class:

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

Now in controls you have value A or B

Upvotes: 0

Azhar Elhar
Azhar Elhar

Reputation: 31

try this worked for me : 

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

Upvotes: 0

Axel186
Axel186

Reputation: 561

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.

Upvotes: 9

Abdus Salam Azad
Abdus Salam Azad

Reputation: 5502

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.

Upvotes: 5

SHOHIL SETHIA
SHOHIL SETHIA

Reputation: 2227

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!

Upvotes: 156

Vadivel Subramanian
Vadivel Subramanian

Reputation: 458

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

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

Upvotes: 37

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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

Upvotes: 11

Related Questions