ng-reflect-model shows correct value but not reflecting in input

Question

Encountered a very weird issue where my application misbehaves in a very specific user case. I have a portal where users can add questions and answers and then edit them. In thi

Answer 1

Apparently the issue was being caused because Angular wasn't able to track the elements of my array properly. I found this out very hard way. So just adding a trackBy attribute to my ngFor, I was able to resolve this.

Added this to my component:

customTrackBy(index: number, obj: any): any {
  return index;
}

and then in the template:

<div class="margin-bottom-15"
     *ngFor="let assessment of language.assessments; trackBy:customTrackBy">

So basically I am asking angular to track my elements in the array by index. It resolved the issue.

Here assessment is the model for each of the question-answer set.

Answer 2

else you can use

*ngFor="childItem of parentArray; index as i;"

and

[attr.data-target]="'#test' + i"

and

name="test{{i}}

Answer 3

In case if you are using nested ngFor then name attributes might not unique. It should be unique. So suffix name attribute with indexes of for loop to make it unique.

 <form #f="ngForm" validate>
      <div *ngFor="childItem of parentArray; index as pIndex;">
           <div *ngFor="childArray of childItem.parameters;index as cIndex;">
                 First Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.firstname" required>
                 Last Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.lastname" required>

                <button type="button" [disabled]="!f.valid"
                (click)="submitForm();"> Submit  </button>
            </div>
       </div>
 </form>