Angular add/edit form - missing data from a Span in an ngFor

Issue

So I have an add/edit screen where I need to submit a list. (among other data) The user is going to need to check 2-3 checkboxes for this specific data, and saved record will have multiple options mapped.

The html looks like this.

<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 calling this onInit:

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 })
        }));
      });

    });
  }

Console.log() is diplaying all records as it needs to do, Id and title too. Looks perfect.

In the screen, I have the same number of records (11), all with checkboxes.

The issue? all the records are empty, have no text, and have no title, just 11 checkboxes with no text whatsoever

What I tried:

1. It does display the xy, that is next to the {{item.title}}xy - this was just to test that no missing class or any issues like that

2. It does not have the id that I added to test it in the hint ("title"). This is how it looks like in the elements tab in Chrome <span class="m-l-5" title=""> xy</span>

3. I tried to put {{ item }} instead of {{item.title}}, and then it shows [object object] so I am guessing that I have the right object there

Why do I not see anything? What am I doing wrong? Why is there no error in the console or anywhere? What else can I try?

Solution

<span class="m-l-5">{{item.controls.title.value}}</span>

Answered By - Ash