How I get checkbox values instead of boolean value on submit in angular

Question

I am using template driven form. Currently i am getting the true or false value. but i need the actual value of checkbox

 <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)">
    <h2 class="no-top-space">
        {{Questions?.Question}}
    </h2>
    <div *ngFor="let op of options">
        <input type="checkbox" name="check" [value]="option.Value" ngModel>{{op.Value}}
    </div>
    <button type="submit" role="button" class="btn btn-primary blue">Submit</button>
</form>



onClickSubmit(data){
    console.log("dataaa",data)
}

if you only can check one check at time: this SO, if you can get an array this another SO, and you has another aproach in this another one — Eliseo
– Eliseo, Commented Aug 6, 2021 at 11:56

Soumi Ghosh · Accepted Answer · 2022-10-19 13:05:23Z

1

Try this: In html:

 <input type="checkbox" name="check" [value]="op.Value" ngModel (change)="handleChange($event)">{{op.Value}}

In ts:

declare an array variable which will have a blank array initially. like

selectedOptions:string[]=[]

Then build the handleChange method as:

handleChange(event:any)
{
    if(this.selectedOptions.length>0)
    {
     let existedOption = this.selectedHobby.findIndex((x) => x === e.target.value); //to check if it is already present in the array or not
          if (existedOption != -1)
           {
                this.selectedOptions.splice(existedOption, 1);
           } 
           else 
           {
              this.selectedOptions.push(e.target.value);
           }
    } 
    else 
    {
          this.selectedOptions.push(e.target.value);
    }
    console.log(this.selectedOptions);
  }

answered Oct 19, 2022 at 13:05

Soumi Ghosh

1591 gold badge1 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

How I get checkbox values instead of boolean value on submit in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related