angular / angular/components

bug(material/chip): Mdc Chip Grid empties all options when using Reactive Forms and focusing out

Đang mở
#26,358 19 bình luận 16 reaction 0 người được giao Xem trên GitHub
area: material/chips P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.2.6

### Description

Having Reactive forms attached to `mat-chip-grid` which accepts an array of object values, clears them on focus out.

### Reproduction

Steps to reproduce:
1. Create a formgroup with some formControl
2. Bind it to ` `
3. Add some new options (or the same works if the list is already populated) that are **arrays of objects**.
4. Focus out of the component

https://stackblitz.com/edit/angular-6g9jz1?file=src%2Fapp%2Fchips-input-example.ts,src%2Fapp%2Fchips-input-example.html

Upon further investigation, figured that the core problem is that on focus out, object values are transformed to strings hence why we don't see the name property. Nevertheless objects were not transformed in v 14.

![mat-grid-bug](https://user-images.githubusercontent.com/26407402/210384868-edfda991-132a-48dd-9a44-90aeaeebaebc.gif)

_Note:_ In the Docs Chip list works as expected because it is not bound to Reactive forms

### Expected Behavior

All options remain with previously defined object values

### Actual Behavior

All options are transformed to strings thus we have empty text options

### Environment

- Angular: 15.0.4
- CDK/Material: 15.0.3
- Browser(s): Chrome 108.0.5359.124
- Operating System: macOS Ventura 13.1

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

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

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết, đặc biệt là src/app/chips-input-example.ts và src/app/chips-input-example.html, đồng thời kiểm tra cách mat-chip-grid được liên kết với Reactive Forms bằng các mảng đối tượng. Tái hiện hành vi khi mất focus, sau đó xác minh rằng các tùy chọn vẫn giữ nguyên các giá trị đối tượng và văn bản hiển thị của chúng.

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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/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.