Angular 4 checkbox change value

Question

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.

Federico Grandi · Accepted Answer · 2018-11-19 18:55:09Z

156

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!

edited Nov 19, 2018 at 18:55

Federico Grandi

6,7965 gold badges34 silver badges51 bronze badges

answered Nov 2, 2017 at 7:30

SHOHIL SETHIA

2,2372 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

J. Edu Over a year ago

With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?

SHOHIL SETHIA Over a year ago

Is there a way you can parse it ? I can't understand your current problem, !

Prasad Patel Over a year ago

Simple and easy solution but in my browser console it was saying that "It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7." yet it still working. will it work for long time or what? can you please explain?

CESAR NICOLINI RIVERO Over a year ago

It worked for me with this: checkValue(event: any){ console.log(event.currentTarget.checked); }

ssuperczynski · Accepted Answer · 2021-01-27 10:12:28Z

112

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

edited Jan 27, 2021 at 10:12

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

answered Nov 2, 2017 at 6:07

balajivaishnav

2,8935 gold badges25 silver badges39 bronze badges

2 Comments

Chris Over a year ago

Alternatively, set the parameter type to (event:Event) instead of (values:any) and access the checked attribute via (event.target as HTMLInputElement).checked

Chris Over a year ago

Also, you can bind the checkbox to the model with [checked]="isChecked"

Vadivel Subramanian · Accepted Answer · 2018-08-30 07:37:36Z

37

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

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

answered Aug 30, 2018 at 7:37

Vadivel Subramanian

4585 silver badges8 bronze badges

1 Comment

James Ikubi Over a year ago

$event.target.checked is what I was looking for, as opposed to $event.target.value for inputs

Brad Ahrens · Accepted Answer · 2021-09-16 08:16:25Z

22

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

edited Sep 16, 2021 at 8:16

Brad Ahrens

5,1846 gold badges39 silver badges55 bronze badges

answered Aug 16, 2021 at 6:48

ProgIn

3613 silver badges8 bronze badges

Comments

AddWeb Solution Pvt Ltd · Accepted Answer · 2017-11-02 05:59:59Z

11

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

answered Nov 2, 2017 at 5:59

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

Comments

Axel186 · Accepted Answer · 2019-03-07 05:52:59Z

9

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.

answered Mar 7, 2019 at 5:52

Axel186

5615 silver badges18 bronze badges

Comments

shareef · Accepted Answer · 2021-05-08 17:19:32Z

7

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

edited May 8, 2021 at 17:19

shareef

9,64116 gold badges64 silver badges94 bronze badges

answered Jun 20, 2020 at 4:58

Shubham

1773 silver badges11 bronze badges

1 Comment

André C. Andersen Over a year ago

I needed to use e.target.checked for this to work.

Abdus Salam Azad · Accepted Answer · 2019-01-09 09:56:11Z

5

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.

answered Jan 9, 2019 at 9:56

Abdus Salam Azad

5,59252 silver badges37 bronze badges

Comments

Azhar Elhar · Accepted Answer · 2019-06-19 16:50:39Z

0

try this worked for me :

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

answered Jun 19, 2019 at 16:50

Azhar Elhar

311 silver badge3 bronze badges

Comments

adiga · Accepted Answer · 2019-07-17 17:00:36Z

0

Inside your component class:

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

Now in controls you have value A or B

edited Jul 17, 2019 at 17:00

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jul 17, 2019 at 16:53

Chetan Upreti

11 bronze badge

Comments

Eyayu Tefera · Accepted Answer · 2021-10-14 08:00:36Z

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>

Collectives™ on Stack Overflow

Angular 4 checkbox change value

11 Answers 11

4 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

4 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related