input-mask
input-mask copied to clipboard
Initial `FormControl<Date>` is invalid
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:
- When the form value is initialized with a
null
value, the form has the error{ "matDatepickerParse": { "text": "" } }
- When a default date value is set after some time, the form has the error
{ "matDatepickerParse": { "text": "dd/mm/yyyy" } }
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: