forms: `(input)` event timing discrepancy between `ngModel` and `formField`
- 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