angular / angular/components

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

Aperta
#29,939 7 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dal comportamento di MatFormFieldNotchedOutline per l’aspetto outline e riproduci un mat-label renderizzato condizionalmente con @if dopo l’inizializzazione. È completato quando l’outline non mantiene più lo stato senza label e il label appare quando viene aggiunto, in linea con il comportamento fill esistente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.