dimanche 27 janvier 2019

displaying checkboxes in multiple cols in Angular 6 reactive form

Bootstrap to display dynamic checkboxes in 3 columns

I am following this example to create a list of dynamic checkboxes across 3 columns, currently trying to make it work using static data but later will get from service. Right now, it is not throwing any error but not displaying checkboxes. I am not sure what is incorrect.

Template:

<form [formGroup]="ReportsForm" (ngSubmit)="submit()">

    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-4">
                <label for="options" class="col-xs-4">Options</label>
            </div>
            <div class="col-xs-8">
                <div class="row" *ngFor="let group of groups">
                    <div class="col-xs-4" *ngFor="let option of group">
                        <input id="" formControlName="" type="checkbox" [checked]=false /> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div *ngIf="!ReportsForm.valid">At least one order must be selected</div>
    <button>submit</button>
</form>

Component:

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { asEnumerable } from 'linq-es2015';

@Component({
    selector: 'app-report',
    templateUrl: './report.component.html',
    styleUrls: ['./report.component.scss']
})
export class ReportComponent {


    options = [
        { id: 1, option: 'chk 1' },
        { id: 2, option: 'chk 2' },
        { id: 3, option: 'chk 3' },
        { id: 4, option: 'chk 4' },
        { id: 5, option: 'chk 5' },
        { id: 6, option: 'chk 6' },
        { id: 7, option: 'chk 7' },
        { id: 8, option: 'chk 8' },
        { id: 9, option: 'chk 9' },
        { id: 10, option: 'chk 10' },
        { id: 11, option: 'chk 11' },
        { id: 12, option: 'chk 12' },
        { id: 13, option: 'chk 13' },
        { id: 14, option: 'chk 14' },
        { id: 15, option: 'chk 15' },
        { id: 16, option: 'chk 16' },
        { id: 17, option: 'chk 17' },
        { id: 18, option: 'chk 18' }
    ]; 

    constructor(private formBuilder: FormBuilder) {
    } 

    ngOnInit() {

        var groups = asEnumerable(this.options)
            .Select((option, id) => { return { option, id }; })
            .GroupBy(
                x => Math.floor(x.id / 3),
                x => x.option,
                (key, options) => asEnumerable(options).ToArray()
            )
            .ToArray();

    }

    submit() {

//capture selected values
    }
}




Aucun commentaire:

Enregistrer un commentaire