angular / angular/components

bug(mat-form-field): mat-label incorrectly displayed at init (behavior possible)

Đang mở
#26,833 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/form-field 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?

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

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

_No response_

### Description

Sometimes, when the component mat-form-field is initied too fastly, when we use mat-icon with the attribute matPrefix or matSuffix, the mat-label is misplaced only at the init of the entire component.

A possible behavior can be to initialize the mat-form-field with setTimeout at 100ms or more after the component loaded on ngOnInit().
But, when using ReactiveFormsModule, an error (NG01050: formControlName must be used with a parent formGroup directive) can still be present but the forms works **normally.**

### Reproduction

Steps to reproduce:
1. Create a mat-form-field
2. Add a mat-label to this one
3. Add a trailling mat-icon with matPrefix or matSuffix

### Expected Behavior

The mat-icon and mat-label must be placed normally, means the icon must be before the mat-label for example.

### Actual Behavior

The label must be placed after the icon for matSuffix but only at init he is misplaced above or below the mat-icon. The mat-label works normally after he is focused.

### Environment

- Angular: Angular 15.0.0
- CDK/Material: 15.2.2
- Browser(s): Brave, Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

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 trường hợp khởi tạo với Angular Material mat-form-field, mat-label, mat-icon và matPrefix hoặc matSuffix, bao gồm cả kịch bản ReactiveFormsModule đã mô tả. Kiểm tra quá trình khởi tạo mat-form-field và thời điểm ngOnInit được thực thi, sau đó xác minh rằng biểu tượng và nhãn được định vị chính xác ngay ở lần render đầu tiên mà không gặp lỗi formControlName đã được báo cáo.

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
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
32/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.