Johnnyboy7781 commented 5 months ago

🐞 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 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?

🔬 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:

"@angular-architects/module-federation": "^16.0.4",
"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/material": "^16.0.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"@ngx-formly/core": "^6.1.8",
"@ngx-formly/material": "^6.2.2",
"ngx-mask": "^16.4.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"

Though I was able to reproduce with more up to date versions (see the StackBlitz).

shyambhiogade commented 4 months ago

try using [(ngModel)]="startTime"

LoginovSergey commented 3 months ago

Any solutions?

weilinzung commented 2 months ago

same issue with NG_VALUE_ACCESSOR with normal reactive form

JsDaddy / ngx-mask

Formly + ngx mask - label not floating when initial input value is set #1305