interference mask and title of input

[mbsh-code]

we have a problem when using mask in input component ، the problem is that title of input and mask interference together we are using angular material version 16.2.0 and angular version is also 16.2.0 and our input of forms generated dynamically
how to fix issue?
Thanks

[andriikamaldinov1]

@mbsh-code Hi. Could you provide stackblitz ??

[russcarver]

Same here. I have a dialog with 9 Angular Material form fields. The last 4 do not float the label when there is data to repopulate for them when the FormGroup is created. All the other fields with masks are fine.

When the problematic fields are empty and you add data, they behave fine.
When you click into any field, all the labels float up.

All 9 of my fields are currency fields and have the following mask parameters:
mask="separator.2" matInput prefix="$" thousandSeparator="," [leadZero]="true"

All my problematic fields are inside a ngFor loop.
When I remove the other (nonproblematic fields) the ones in the loop still have the issue.
The 4 problematic fields are inside a FormGroup inside a FormArray inside the main FormGroup.
The loop is inside an that has an *ngIf.

Fields placed after (below) the looped fields and after the are fine.
Fields placed after (below) the looped fields, but INSIDE the also show the issue.
Fields placed after (below) the looped fields, but INSIDE the WITHOUT the *ngIf are fine.
Changing the to a

makes no difference.
Removing the still has the 4 fields in a loop being problematic (and the field after is fine).

Programmatically setting focus to any of the 4 problematic fields makes all their labels behave fine.

Also, removing the looped fields completely, but keeping the last field inside the

1. Causes it to still show the problem when the has an *ngIf
2. Has the field behavior normally when the *ngIf is removed from the
3. Causes it to still show the problem when the is changed to a
   and has an *ngIf

It does not fix it if I remove the thousandSeparator or prefix or [leadZero]
It does not fix it if my mask is set to "000" or "99999999"

Angular: 16.2.12
Angular Material: 16.2.12
ngx-mask: 16.4.2

In summary, the labels do not float when:

1. Inside an HTML element with an *ngIf
2. Inside a FormGroup inside a FormArray inside the main FormGroup (rendered with an *ngFor)

[mbsh-code]

@mbsh-code Hi. Could you provide stackblitz ??

Unfortunately, I cannot do this
My problem also occurs when the inputs are in a formGroup and are created with a loop

[mbsh-code]

Same here. I have a dialog with 9 Angular Material form fields. The last 4 do not float the label when there is data to repopulate for them when the FormGroup is created. All the other fields with masks are fine.

When the problematic fields are empty and you add data, they behave fine. When you click into any field, all the labels float up.

All 9 of my fields are currency fields and have the following mask parameters: mask="separator.2" matInput prefix="$" thousandSeparator="," [leadZero]="true"

All my problematic fields are inside a ngFor loop. When I remove the other (nonproblematic fields) the ones in the loop still have the issue. The 4 problematic fields are inside a FormGroup inside a FormArray inside the main FormGroup. The loop is inside an that has an *ngIf.

Fields placed after (below) the looped fields and after the are fine. Fields placed after (below) the looped fields, but INSIDE the also show the issue. Fields placed after (below) the looped fields, but INSIDE the WITHOUT the *ngIf are fine. Changing the to a

makes no difference.
Removing the still has the 4 fields in a loop being problematic (and the field after is fine).
Programmatically setting focus to any of the 4 problematic fields makes all their labels behave fine.

Also, removing the looped fields completely, but keeping the last field inside the

1. Causes it to still show the problem when the has an *ngIf
2. Has the field behavior normally when the *ngIf is removed from the
3. Causes it to still show the problem when the is changed to a and has an *ngIf

It does not fix it if I remove the thousandSeparator or prefix or [leadZero] It does not fix it if my mask is set to "000" or "99999999"

Angular: 16.2.12 Angular Material: 16.2.12 ngx-mask: 16.4.2

In summary, the labels do not float when:

1. Inside an HTML element with an *ngIf
2. Inside a FormGroup inside a FormArray inside the main FormGroup (rendered with an *ngFor)

I have the same problem
My version is the last version published

[Johnnyboy7781]

In my case, I have a <mat-form-field> with a <mat-label> and an <input>. When I added the showMaskTyped attribute on my input, I got the same issue where my mat-label and the mask type were both showing over eachother.

I got around it by adding floatLabel="{{this.showMaskTyped ? 'always' : 'auto'}}" to my <mat-form-field>. I have this.showMaskTyped coming in dynamically which is why I have the variable. If you are making the form fields manually, you could just add a floatLabel="always". Setting this to always will cause the label to begin and stay floating above the input. My <mat-form-field> opening tag looks like the following:

<mat-form-field floatLabel="{{this.showMaskTyped ? 'always' : 'auto'}}">

Hope this helps!

[russcarver]

Yeah, we are floating the label always now as a work-around. But I don't want it to float when there is no data.