angular / angular/angular

forms: `(input)` event timing discrepancy between `ngModel` and `formField`

Aperta
#68,182 0 commenti 1 reazione 0 assegnatari Vedi su GitHub
area: forms forms: signals
Lingua principale
TypeScript
Stelle
101k
Fork
27.5k
Merge medio
1g 19h
PR unite (30g)
288

Descrizione

### Which @angular/* package(s) are relevant/related to the feature request?

forms

### Description

Hey!

A while ago I opened the following issue https://github.com/angular/angular/issues/63608, which was resolved (or at least I'm fairly sure it was 😅).

However, the discrepancy between `formField` and `ngModel` seems to be back in the latest version of Angular.

```ts

@Component({
imports: [FormField, FormsModule],
template: `

Signal forms



First:


Model:

`,
})
export class App {
protected readonly source = signal({ first: '', last: '' });
protected readonly form = form(this.source);

protected readonly model = signal('');

firstChange(value: string) {
console.log(`event: ${value}, first: ${this.form.first().value()}`);
}

modelChange(value: string) {
console.log(`event: ${value}, model: ${this.model()}`);
}
}
```

When you type in the first / model inputs, the two signals behave differently: inside the input event handlers, `first` still holds the old value, while `model` already reflects the new one.

Unless I'm missing something obvious (my bad!), it would be great if the two behaviours were consistent.

Cheers!

https://stackblitz.com/edit/stackblitz-starters-rdvuqbrw?file=src%2Fmain.ts

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo la discrepanza nello StackBlitz collegato, concentrandoti sui due gestori dell’input nell’esempio del componente e confrontando formField con ngModel. Leggi gli entry point del pacchetto Angular forms coinvolti in questi binding e traccia quando ciascun signal viene aggiornato rispetto all’evento di input. Il lavoro è completato quando entrambi i binding espongono valori coerenti all’interno dei rispettivi gestori dell’input e il comportamento è stato verificato rispetto alla riproduzione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.