angular / angular/angular

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

Open
#68,182 0 comments 1 reaction 0 assignees View on GitHub
area: forms forms: signals
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the discrepancy in the linked StackBlitz, focusing on the two input handlers in the component example and comparing formField with ngModel. Read the Angular forms package entry points involved in those bindings and trace when each signal updates relative to the input event. Done means both bindings expose consistent values inside their input handlers, with the behavior verified against the reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.