Uncertainty surrounds the correct method for binding and updating a model when dealing with dynamically generated checkboxes in an ASP.NET Core project with Angular 2. The struggle extends to even basic checkbox elements, as observed through personal experience.
Here's a condensed code snippet featuring facilities and timeslots. Each facility can house multiple timeslots, but the issue arises when all timeslots are checked instead of just those associated with the facility. The expected ngModel binding isn't functioning as desired.
- The quest to have only relevant timeslots checked within a facility persists. How should this be rectified?
- Regarding binding the checked items to the ngModel property 'timeslotids', could the creation of an array property and manual manipulation prove more effective than relying solely on ngModel?
- Moreover, struggles persist with simple checkboxes (like 'haselectric') not getting ticked off when necessary. Could there be a missing import that could resolve these issues collectively?
CODE EXPLANATION: Two interfaces ('IFacility' and 'ITimeslot') sourced from an API are simplified here:
export interface IFacility {
id: number,
name: string,
haselectric: boolean,
timeslotids: number[],
timeslots: ITimeslot[]
}
export interface ITimeslot {
id: number,
timeslotname: string
}
Timeslots JSON data:
[{"id":1,"timeslotname":"Daily"},{"id":2,"timeslotname":"Hourly"},{"id":4,"timeslotname":"Market"}]
Prior to modification, a single Facility’s JSON data looks like:
{"id":2,"name":"Clements Building","haselectric":true,"timeslotids":[1],"timeslots":[{"id":1,"timeslotname":"Daily"}]}
Facility editing component (facility.component.html):
<form #form="ngForm" (ngSubmit)="submitForm()" *ngIf="formactive">
<input type="hidden" [(ngModel)]="updatedfacility.id" #id="ngModel" name="id" />
<div class="form-group">
<label for="name">Facility Name *</label>
<input type="text" class="form-control input-lg" [(ngModel)]="updatedfacility.name" #name="ngModel" name="name" placeholder="Facility Name *">
</div>
<div class="form-group">
<label for="exhibitspaces">Has Electric *</label>
<input type="checkbox" class="form-control input-lg" [(ngModel)]="updatedfacility.haselecric" #haselectric="ngModel" name="haselectric">
</div>
<div class="form-group">
<label for="timeslots">Select Timeslots Available for Rent *</label>
<div *ngIf="dbtimeslots" >
<span *ngFor="let timeslot of dbtimeslots" class="checkbox">
<label for="timeslot">
<input type="checkbox" [(ngModel)]="updatedfacility.timeslotids" value="{{timeslot.id}}" name="{{timeslot.id}}" [checked]="updatedfacility.timeslotids.indexOf(timeslot.id)" />{{timeslot.timeslotname}}
</label>
</span>
</div>
</div>
<button type="submit" class="btn btn-lg btn-default" [disabled]="form.invalid">Update</button>
</form>
Component code (facility.component.ts)
import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core';
// Additional imports…
@Component({
template: require('./facility.component.html')
})
export class FacilityDetailsComponent {
// Class variables…
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _facilityservice: FacilityService,
private _timeslotservice: TimeslotService
) {}
// Relevant methods…
Final Notes: A practice of utilizing separate 'id' arrays for passing information to APIs is explained. This question has brought up some similar inquiries without offering concrete solutions yet.
Returns: ngmodel binding with dynamic array of checkbox in angular2 Get values from a dynamic checkbox list Angular 2: Get Values of Multiple Checked Checkboxes