angular / angular/components

but(FormFiled): Floating label hide/show not responsive when set to outline appearance.

Đang mở
#29,939 7 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

When you have a mat form field and the mat-label is conditional. If the view starts with the label and gets remove with @if in template it is perfectly fine. Will disappear and reappear. If the view starts with-out the mat label rendered, the label will get rendered but the component, 'MatFormFieldNotchedOutline" still has the class, 'mdc-notched-outline--no-label', so the display is set to none.

Looks as though if the mat-label is not there on view init it is not responsive.

The behavior works fine with fill appearance.

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

When mat-label gets rendered in even after init, i.e. Using a structural directive or decorator such *ngIf or @if. The label should show no matter the appearance.

### Actual Behavior

When you have the appearance set to outline and the view is initially rendered without the label it is not responsive and will not show up.

### Environment

- Angular: 18.2.10
- CDK/Material: 18.2.10
- Browser(s): Edge, Chrom
- 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 với hành vi của MatFormFieldNotchedOutline đối với kiểu hiển thị outline và tái hiện một mat-label được render có điều kiện bằng @if sau khi khởi tạo. Hoàn tất khi outline không còn giữ trạng thái không có label và label xuất hiện khi được thêm vào, khớp với hành vi fill hiện có.

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