I am currently working on an add/edit screen that requires submitting a list, among other data. The user will need to check 2-3 checkboxes for this specific data, and the saved record will have multiple options mapped.
Here is what the HTML looks like:
<div class="col-sm-6 form-group">
<label>P</label>
<div class="form-control details">
<div class="row" formArrayName="pay" *ngFor="let item of payArray.controls; let i = index;">
<div class="col-12" [formGroupName]="i">
<input type="checkbox" formControlName="selected" class="custom-checkbox-input">
<span class="m-l-5" title="{{ item.Id }}">{{item.title}}xy</span>
</div>
</div>
</div>
</div>
On the .ts side, I am initializing it with this function:
getPay() {
this.PayDS.getItems(true).subscribe(result => {
this.ddlPay = result.list || [];
this.payArray = this.form.get('pay') as FormArray;
this.pay.clear();
this.ddlPay.forEach(item => {
console.log('item.Id = ' + item.Id + ', item.title = ' + item.title);
this.payArray.push(this.formBuilder.group({
Id: new FormControl(item.Id),
title: new FormControl(item.title),
selected: new FormControl({ value: item.selected })
}));
});
});
}
The Console.log() displays all records correctly, including Id and titles. Everything seems to be in order.
In the screen, I have the same number of records (11), each with checkboxes.
The issue? All the records are empty, without any text or title, just 11 checkboxes with no text displayed.
What I've tried so far:
The "xy" next to the {{item.title}}xy does display, which confirms there are no missing classes or issues.
The id that I added as a hint ("title") is not showing up when inspected in Chrome's elements tab
<span class="m-l-5" title=""> xy</span>When I replaced {{item.title}} with {{ item }}, it showed "[object object]", indicating that the correct object is being passed.
Why is nothing being displayed? What could be going wrong here? Why are there no errors in the console or anywhere else? What else should I try?