I am facing a problem with *ngFor directive while reverse routing. I am using the loop to input certain employment details multiple times. I am posting code snippet here for example and the entire file is huge.

        <div class="row p-fluid" style="padding-top:30px;">
          <div class="p-field p-col-12">
            <span class="p-float-label">
              <input type="text"
                     class="inputTextBox"
                     id="employer{{i}}"
                     pInputText
                     name="incomeName{{i}}"
                     [(ngModel)]="income.EmploymentName"
                     #employerCtrl="ngModel"
                     required>
              <p-message class="messageError" severity="error" text="Employer is required" *ngIf="employerCtrl.errors?.['required'] && employerCtrl.touched && IsEmployed[i]"></p-message>
              <p-message class="messageError" severity="error" text="Source description is required" *ngIf="employerCtrl.errors?.['required'] && employerCtrl.touched && IsBenefit[i]"></p-message>
              <p-message class="messageError" severity="error" text="Business name is required" *ngIf="employerCtrl.errors?.['required'] && employerCtrl.touched && IsSelfEmployed[i]"></p-message>
              <label for="employer{{i}}" class="inputLabel" *ngIf="IsEmployed[i]">Employer</label>
              <label for="employer{{i}}" class="inputLabel" *ngIf="IsBenefit[i]">Source Description</label>
              <label for="employer{{i}}" class="inputLabel" *ngIf="IsSelfEmployed[i]">Business Name</label>
            </span>
          </div>
        </div>

Like this there are multiple fields. I am using following *ngFor in div.

  <div *ngFor="let income of formData.ApplicantIncomeList;let i=index">

Using this I am collecting data for multiple incomes using an array in Angular. There is a provision to choose from multiple income types. Labels in the code snippet will be decided by the type of income chosen.

During the forward flow, when I click on continue button, everything works fine Expected behavior is not observed when I get back to this tab through reverse routing (hitting back on browser). Value of the latest iteration was getting displayed for all the previous iterations.

Using Name attribute for input fields solved the problem for me. However, I am not able to map the labels to the iterations.

Eg: For income type 'Benefit' label must be 'Source Description'. But when I come to this page through reverse routing, it shows the label applicable to the last iteration.

Is there any way to distinguish label tag for each iteration? "Name" attribute is not applicable to non-input fields.