Angular lost the most important thing, the binding?

Ionic Framework Ionic Angular
1

I would like to know what happened with the binding of Angular that I thought was the most important, in the code below, if I modify the array item, there is no more bind and if I put emails[i] what I already think kinda ugly, the input loses focus with each digit. Thanks!

app.component.html

<div>
  <ul>
    <li *ngFor="let email of emails; let i = index; trackBy:trackByfn">
      <input [(ngModel)]="email">
    </li>
  </ul>
  <span>{{ emails | json }}</span>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  emails: string[] = ['test@mail.com'];

}
2

I don’t think anything changed here on Angular’s part, but what you are trying to do has always been problematic by nature. It’s hard to say conclusively because you’ve tantalizingly defined a custom trackBy function but haven’t posted it, but I would recommend going through angular/angular #10423 and the links posted therein for a summary of what I suspect is going on.

3

The TrackByFn is not used here, the function not exists

4 
trackByFn(index, item) {
    return index;
}

But it still doesn’t work even with TrackBy !! It all just worked!

5

I really wish people would just completely stop using the phrase “it doesn’t work”.

In the long run, I suspect you will probably be happier if you just converted this to be a reactive form, but for the record, can you please describe precisely how you wish the following code would behave differently?

 fruits = ["apple", "banana", "cherry"];

 trackByIndex(ix: number): any {
   return ix;
 }

<ion-content>
    <ion-list>
        <ion-item *ngFor="let fruit of fruits; let i = index; trackBy: trackByIndex">
            <ion-input [(ngModel)]="fruits[i]"></ion-input>
        </ion-item>
    </ion-list>

    <div><pre>{{fruits | json}}</pre></div>
</ion-content>
6

It doesn’t work that way for me, the input loses focus with each digit, and the (input) event doesn’t work correctly either. I am using Angular 8.1.3.

7

Using Reactive Forms you write too much code for something simple and then you still have to manually pass everything to Model in the “Old Development” style (eg Visual Basic)

8

Did you try my code exactly? If you leave off the trackBy function, the behavior you describe will happen, because (as discussed in the bug I linked earlier), the DOM has to get rebuilt because Angular thinks we have a brand new value.

This comment worries me. Is it possible you’re doing something in response to an (input) event that is complicating matters?

Leaving aside getting validation, status, and value checking for free, is this really that much extra code?

 fruits = ["apple", "banana", "cherry"];
 fg: FormGroup;

 constructor() {
   this.fg = new FormGroup({});
   for (let fruit of this.fruits) {
     this.fg.registerControl(fruit, new FormControl(fruit));
   }
 }

<ion-content>
    <ion-list [formGroup]="fg">
        <ion-item *ngFor="let fruit of fruits">
            <ion-input [formControlName]="fruit"></ion-input>
        </ion-item>
    </ion-list>

    <div><pre>{{fg.value | json}}</pre></div>
</ion-content>

Sorry, not following you here. Despite definitely being an OLD developer who probably writes a lot of things in styles one would consider old, I’ve never touched Visual Basic and don’t know anything about it other than Microsoft made it.