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