当使用浏览器后退按钮导航到页面时，角度绑定在Chrome上的应用不正确

Question

Any ideas on why this might happen? I've got several textboxes that are generated inside an ngFor:

    <tr *ngFor="let tableRow of lineItems; trackBy:trackByIndex; let rowIndex = index; ">     
      <td class="psavingsSmallerGridCell"><input currencyMask [(ngModel)]="tableRow.existingCost" [attr.disabled] = "shouldExistingChargeBeReadOnly(tableRow)"/></td>
      <td class="psavingsSmallerGridCell"><input currencyMask [(ngModel)]="tableRow.projectedCost" /></td>
      <td class="psavingsSmallerGridCell"><input currencyMask [ngModel]="tableRow.actualCost" disabled /></td>

I've console.logged to verify the lineItems array from the model is accurate, but for whatever reason when using the back button in Chrome (Version 66.0.3359.181 (Official Build) 64-bit), the values bound to the inputs get all sorts of jacked up. Of the browsers I've tried, so far only Chrome has this behavior.

Image of messed up rendering

I did try removing the currencyMask 3rd party directive to eliminate that as a source of the problem.

Inspecting the DOM with dev tools shows the ng-reflect-model attribute on the messed up boxes has the right value assigned, it's just the input text value itself is wrong.

Answer 1

This ended up being less to do with Angular and more to do with Chrome's handling of dynamic forms. Setting autocomplete=off on the form element fixed the issue.