1

I am developing an ngb-accordion based widget which internally contains a ngb-panel which contains a div which loops through an array of elements.

Data structure: 1-n
employee <------> previousEmployments 1-1
employee <------> insurance

The employee, insurance and previousEmployments are in separate ngb-panels. The ngb-panel that contains the previousEmployments contains a ngFor on a div element.

<div *ngFor="let previousEmploymenttemp of employee.previousEmployments; let i=index" >
        <div class="col-sm-12">          

    <div class="row">


    <div class="form-group col-md-4">       
    <ig-input  [inputField]="editForm.controls.company" [inputErrors]="editForm.controls.company?.errors">
        <label class="form-control-label" jhiTranslate="finaldemoApp.employee.previousEmployment.company" for="subfield_company">Company</label>

        <input type="text" class="form-control" name="company" id="subField_company"
            [(ngModel)]="previousEmploymenttemp.company"
         />
    </ig-input>

    </div> 
....
....

Let us assume that the employee.previousEmployments contains three elements, the ngFor loops through the elements but all the inputs contain the value of the element employee.previousEmployments[2] i.e the last element.

Graham
  • 7,431
  • 18
  • 59
  • 84
Prashanth Raghu
  • 169
  • 1
  • 2
  • 6
  • This may not be the problem but you're using the same ID (__subField_company__) for all the input elements. IDs are meant to be unique. – Titus Aug 01 '17 at 05:58
  • @Titus I made the IDs unique but the same problem is prevalent. – Prashanth Raghu Aug 01 '17 at 06:07
  • The problem was that I was using the same name attribute. Adding distinctness to the name solved the problem. https://stackoverflow.com/questions/39336708/angular2-ngmodel-inside-ngfor-data-not-binding-on-input – Prashanth Raghu Aug 01 '17 at 09:22

0 Answers0