Angular2 Dynamic input field lose focus when input changes

by

This happens when the array is a primitive type, in your case a String array. This can be solved by using TrackBy. So change your template to match the following:

<div *ngFor="let value of field.values; let i=index; trackBy:trackByFn">
    <input type="text" [(ngModel)]="field.values[i]"  /><br/>
</div>
<div>
    <button (click)="addValue(field)">Click</button>
</div>

and in the ts file add the function trackByFn, which returns the (unique) index of the value:

trackByFn(index: any, item: any) {
   return index;
}

This is a link about the same issue, except the issue is for AngularJS, but the problem corresponds yours. Most important excerpt from that page:

You are repeating over an array and you are changing the items of the array (note that your items are strings, which are primitives in JS and thus compared “by value”). Since new items are detected, old elements are removed from the DOM and new ones are created (which obviously don’t get focus).

With TrackBy Angular can track which items have been added (or removed) according to the unique identifier and create or destroy only the things that changed which means you don’t lose focus on your input field 🙂

As seen in the link you can also modify your array to contain objects which are unique and use [(ngModel)]="value.id" for example, but that’s maybe not what you need.

More Related Contents:

  1. What is #auto attribute here and why it is required
  2. Angular 2: Callback when ngFor has finished
  3. Angular ReactiveForms: Producing an array of checkbox values?
  4. How to make a disabled reactive form Editable in Angular2
  5. Angular 2, set default value to select option
  6. Angular 7 go offline?
  7. How to add number with variable name? [duplicate]
  8. Firebase query if child of child contains a value
  9. Angular: conditional class with *ngClass
  10. How do I download a file with Angular2 or greater
  11. (change) vs (ngModelChange) in angular
  12. Angular window resize event
  13. Angular 2 dependency injection in ES5 and ES6
  14. How to Consume Http Component efficiently in a service in angular 2 beta?
  15. Angular 2.1.0 create child component on the fly, dynamically
  16. Angular4 – No value accessor for form control
  17. Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551
  18. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  19. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  20. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  21. Angular 2 – Check if image url is valid or broken
  22. Unraveling Angular 2 book, Chapter 1, Example 5
  23. Cast int to enum strings in Typescript
  24. Module not found: Error: Can’t resolve ‘fs’ in
  25. Load JSON content from a local file with http.get() in Angular 2
  26. how to define index in angular material table
  27. How to Export JSON to CSV or Excel – Angular 2
  28. Angular 2 Final Release Router Unit Test
  29. How to check empty object in angular 2 template using *ngIf
  30. How can I apply a quantity limit to *ngFor? [duplicate]

Leave a Comment