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 >
          <label>P</label>
          <div >
            <div  formArrayName="pay" *ngFor="let item of payArray.controls; let i = index;">
              <div  [formGroupName]="i">
                <input type="checkbox" formControlName="selected" >
                <span  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 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?

CodePudding user response：

<span >{{item.controls.title.value}}</span>

CodePudding user response：

Your .subscribe() do not trigger change detection so you have to do it manually.

Add private cd:ChangeDetectorRef into your constructor and in your subscribe after the forEach() loop add this.cd.markForCheck();

getPay() {
    this.PayDS.getItems(true).subscribe(result => {
    ...
    this.ddlPay.forEach(item => {
       ...
    });
    this.cd.markForCheck();
    });
  }

CodePudding user response：

You create a form group with form controls, which are Id, and title.

Those are FORM CONTROLS, not values.

This means, to display them, you need this :

<span  title="{{ item.Id.value }}">{{item.title.value}}</span>

And since you did NOT provide the selected control in formBuilder.group, you can't bind to it. Try providing it to make it work.

Moreover, it should be

<div  [formGroup]="payArray.controls[i]">