get checkbox values in real time with a reactive form Angular

Question

I have a list of country objects, that I access and use with my reactive form. I create each one as a form control dynamically, because this list will be changing. Then I attempt to get the form and values in real time (not using a submit button), as the checkboxes get clicked, by using the ngOnChanges hook. this is obviously not working, what hook should I use? on another note, is this a bad way to accomplish this? what would be a better approach?

component

export class GeoDropComponent implements OnInit, OnChanges {
    countries = [
        {
            name : 'USA',
            continent : 'north america'
        },
        {
            name : 'Canada',
            continent: 'north america'
        }
    ];

    countriesForm: FormGroup;

    constructor() { }

    ngOnInit() {
        // add checkbox for each country
        this.countriesForm = new FormGroup({});
        for (let i = 0; i < this.countries.length; i++) {
            this.countriesForm.addControl(
                this.countries[i].name, new FormControl(false)
            )
        }
    }

    ngOnChanges() {
        console.log(this.countriesForm);
    }

}

html

<div class="geo-list">
    <div class="content-box container">
        <form [formGroup]="countriesForm">
            <div class="country" *ngFor="let country of countries">
                <input
                    type="checkbox"
                    formControlName="{{country.name}}"
                >
                {{ country.name }} | {{ country.continent }}
            </div>
        </form>
    </div>
</div>

Do you need to perform some action when checkbox checked, since you want to capture the changes, or what do you need to do? — AVJT82
– AVJT82, Commented Jul 13, 2017 at 6:36
i need a true or false if the country is checked, to use in the server — FussinHussin
– FussinHussin, Commented Jul 16, 2017 at 21:20

CharanRoot · Accepted Answer · 2017-07-13 00:00:56Z

1

you can try like this. when ever search checkbox is selected or selected change method will update selected items

pseudo code

 <input
            type="checkbox"
             formControlName="{{country.name}}"
             (change)="search(country, $event)
                    >

component file.

selectedItems : any [] = [];

    search(country, event) {

            var index = this.selectedItems.indexOf(country.name);
            if (event.target.checked) {
                if (index === -1) {
                    this.selectedItems.push(country.name);
                }
            } else {
                if (index !== -1) {
                    this.selectedItems.splice(index, 1);
                }
            }

        }
    }

answered Jul 13, 2017 at 0:00

CharanRoot

6,3352 gold badges31 silver badges45 bronze badges

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

3 Comments

FussinHussin Over a year ago

This looks like a good solution to me! i appreciate your time @Jonnysai. i will get this implemented, and let the thread know how it goes

FussinHussin Over a year ago

one question, do I implement the component function within the ngOnChanges() hook? and the (change) part of my html is detected by that hook?

CharanRoot Over a year ago

Change function related to input tag. no need use ngOnChanges.

Collectives™ on Stack Overflow

get checkbox values in real time with a reactive form Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related