ngneat / input-mask

🎭 @ngneat/input-mask is an angular library that creates an input mask

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Initial `FormControl<Date>` is invalid

devfservant opened this issue · comments

I'm submitting a...


[ ] Regression (a behaviour that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behaviour

At the initialization of my FormControl<Date>, I expect it to be valid.
It is not the case, unlike when I'm not using @ngneat/input-mask.

In particular, there are two usecases:

  1. When the form value is initialized with a null value, the form has the error { "matDatepickerParse": { "text": "" } }
  2. When a default date value is set after some time, the form has the error { "matDatepickerParse": { "text": "dd/mm/yyyy" } }

image

Expected behaviour

I expect my form control to have no error, just like when there is no use of @ngneat/input-mask.

Minimal reproduction of the problem with instructions

Please find a reproduction of the problem here: https://stackblitz.com/edit/angular-ivy-8fcojb

For the usecase 1, just compare the form control with mask with the one without mask.
For the usecase 2, just press the button "Inject defaults" and again compare the two forms.

In both cases, the forms should be valid.

What is the motivation / use case for changing the behaviour?

Business usecase: my users may navigate to a form page with optional date fields.
Some of those date fields may be pre-filled with default values.
I expect them to be able to submit a valid form, which is not possible with the use of @ngneat/input-mask.

Additional information

When I modify the form value through the UI and I come back to the default value, then the error disappears.

Workaround:

@ViewChild('dateInputElement')
private readonly input?: ElementRef<HTMLInputElement>;

ngAfterViewInit(): void {
  this.input?.nativeElement.dispatchEvent(new Event('input'));
}

Environment


Angular version: 14.2.1


Browser:
- [x] Chrome (desktop) version 105.0.5195.102
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 18.7.0
- Platform: Windows 10

Others: