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

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.

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>