angular / angular/angular

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

Đang mở
#68,182 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: forms forms: signals
Ngôn ngữ chính
TypeScript
Star
101k
Fork
27.5k
Merge trung bình
1 ngày 19 giờ
Pull request đã merge (30 ngày)
288

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện sự khác biệt trong StackBlitz được liên kết, tập trung vào hai trình xử lý input trong ví dụ component và so sánh formField với ngModel. Đọc các entry point của gói Angular forms liên quan đến những binding này và theo dõi thời điểm mỗi signal được cập nhật so với sự kiện input. Công việc được xem là hoàn tất khi cả hai binding đều cung cấp các giá trị nhất quán bên trong trình xử lý input của chúng và hành vi đã được xác minh dựa trên bản tái hiện.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.