You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have an Angular app (using the standalone API) that uses ngx-formly for creating forms. I am currently adding ngx-mask to be used in masking user input. I have created a custom ngx-formly component type that implements ngx-mask called 'masked-input'. This component type is simply a mat-form-field with a mat-label and an input (which uses the MatInput class).
Everything seems to work as expected until I set an initial value with defaultValue. When I have this set, the label and value will be overlapping like the following example:
Clicking the input will cause the label to behave normally again.
What I've Tried
Change Detection
Initially felt like a change detection issue. I've tried changing detection strategy to OnPush and virtually no change. I've also tried calling markForCheck() and detectChanges() at various points in the component's lifecycle to no avail. I tried wrapping markForCheck() in a setTimeout with a 0 second delay in my ngOnInit() which actually worked! Though, this feels like a hack and is not a solution I would like to actually ship.
Input Attributes
I've tried removing and adding attributes on the input element to see where exactly it breaks. The issue begins the moment I add the mask attribute. I also played around with the value attribute a bit. I found that I could provide it with a default value of just a space, value=" ", and that would also cause the problem to go away. Though, again this feels like a hack and not something I feel comfortable shipping if there is a better way.
provideAnimations()
I noticed while playing around with the StackBlitz demo that the label will behave normally if I remove the call to provideAnimations() in the bootstrapApplication() call, though I would begin to get a ton of errors in the console. Maybe that is at least a clue?
🐞 bug report
Is this a regression?
Unsure
Description
I have an Angular app (using the standalone API) that uses ngx-formly for creating forms. I am currently adding ngx-mask to be used in masking user input. I have created a custom ngx-formly component type that implements ngx-mask called 'masked-input'. This component type is simply a
mat-form-field
with amat-label
and aninput
(which uses theMatInput
class).Everything seems to work as expected until I set an initial value with
defaultValue
. When I have this set, the label and value will be overlapping like the following example:Clicking the input will cause the label to behave normally again.
What I've Tried
Change Detection
Initially felt like a change detection issue. I've tried changing detection strategy to
OnPush
and virtually no change. I've also tried callingmarkForCheck()
anddetectChanges()
at various points in the component's lifecycle to no avail. I tried wrappingmarkForCheck()
in asetTimeout
with a 0 second delay in myngOnInit()
which actually worked! Though, this feels like a hack and is not a solution I would like to actually ship.Input Attributes
I've tried removing and adding attributes on the
input
element to see where exactly it breaks. The issue begins the moment I add themask
attribute. I also played around with thevalue
attribute a bit. I found that I could provide it with a default value of just a space,value=" "
, and that would also cause the problem to go away. Though, again this feels like a hack and not something I feel comfortable shipping if there is a better way.provideAnimations()
I noticed while playing around with the StackBlitz demo that the label will behave normally if I remove the call to provideAnimations() in the bootstrapApplication() call, though I would begin to get a ton of errors in the console. Maybe that is at least a clue?
🔬 Minimal Reproduction
https://stackblitz.com/edit/stackblitz-starters-u7zpzf?file=src%2Fmain.ts
🔥 Exception or Error
None
🌍 Your Environment
My app runs on the following:
Though I was able to reproduce with more up to date versions (see the StackBlitz).
The text was updated successfully, but these errors were encountered: