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 commented 8 months ago

@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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[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.