How to POST checkbox value instead of boolean value - Angular 5

Question

I have this template-driven form:

<form #form="ngForm" (submit)="submitForm()" novalidate>
    <div class="form-group" [class.has-error]="linkName.invalid">
        <label class="control-label" for="name">Name</label>
        <input #linkName="ngModel" type="text" class="form-control" name="name" id="name" [(ngModel)]="finalData.name" required />
        <div *ngIf="linkName.invalid" class="alert alert-danger">Name is required</div>
    </div>
    <div class="form-group">
        <label for="url">Url</label>
        <input type="text" class="form-control" id="url" name="url" [(ngModel)]="finalData.url" readonly/>
    </div>
    <div class="checkbox" *ngFor="let tag of finalData.tags; index as i" [attr.data-index]="i">
        <label><input type="checkbox" name="{{ 'checkbox' + tag }}" id="{{ 'checkbox' + tag }}" (ngModel)="finalData.tags[i]"/>{{ tag }}</label>
    </div>         
    <button type="submit" [disabled]="form.invalid" class="btn btn-primary btn-success">Save</button>
</form>

I want to POST value from checkboxes based on whether they checked or not. This way with one-way binding (ngModel) it will POST all tags whether they checked or not. If I use two-way binding [(ngModel)] it will POST boolean values and it will change name and id based on boolean value, which I don't want.

Example: If i check this I want POST foo instead of true

<label><input type="checkbox" name="footag" id="footag" value="foo" [(ngModel)]="finalData.tags[i]"/>foo</label>

This is component used for data binding:

import { Component, OnInit, Injectable } from "@angular/core";
import { DataService } from "../shared/dataService";
import { FinalFormData } from "../shared/finalFormData";
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from "rxjs/Observable";
import { NgForm } from "@angular/forms";

@Component({
    selector: "final-form",
    templateUrl: "finalForm.component.html"
})

export class FinalFormComponent implements OnInit{

    constructor(private data: DataService, private route: ActivatedRoute, private router: Router) {
    }
    public finalData: FinalFormData;
    public errorMessage = "";
    public isBusy = true;

    submitForm() {
        this.data.postData(this.finalData)
            .subscribe(data => {
                this.finalData = data;
                this.router.navigate(["/"]);
            }, err => console.log(err));
    }

    ngOnInit(): void {
        //let url = encodeURIComponent(this.route.snapshot.queryParams['url']);
        //this.data.loadData(url)
        //    .subscribe(finalData => {
        //        this.finalData = finalData;
        //    }); 
        this.finalData = this.route.snapshot.data['finalData'];
    }
}

FinalFormData class:

export class FinalFormData {
    name: string;
    url: string;
    dateCreated: Date;
    tags: any[];
}

Shouldnt you use (ngSubmit)="submitForm()" instead of (submit)="submitForm()"? — Udi Mazor
– Udi Mazor, Commented Apr 5, 2018 at 21:03
@UdiMazor Yes it's good practice to use ngSubmit but it works anyway so that's not important right now — gagro
– gagro, Commented Apr 5, 2018 at 21:18

Praveen Kumar · Accepted Answer · 2018-04-05 21:02:03Z

4

you can use the ngModelChange method to pass the value and set it to any variable you want. Refer sample code snippet below:

<label><input type="checkbox" name="footag" id="footag" value="foo" [ngModel]="finalData.tags[i]" (ngModelChange)="CheckBoxValueChange('foo',finalData)"/>foo</label>

in the component.ts file, you can access the value and set it to any variable you want:

CheckBoxValueChange(checkboxValue:string,finalData:any){
    finalData.checkboxText=checkboxValue;
    alert(checkboxValue);
}

answered Apr 5, 2018 at 21:02

Praveen Kumar

5432 silver badges12 bronze badges

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

1 Comment

gagro Over a year ago

thanks. I passed checked attribute in CheckBoxValueChange , and then in component.ts I determined whether is checked or not. If it's true I pushed ngModel value in new array, if not I sliced it from array.

Collectives™ on Stack Overflow

How to POST checkbox value instead of boolean value - Angular 5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related