🐞 - Form field validation state is not updated after calling `form.markAllAsTouched()`
hakimio opened this issue · comments
Playground Link
https://stackblitz.com/edit/angular-6fjyuv
Description
Calling form.markAllAsTouched() does not mark invalid inputs in "Taiga UI" form.
Input UI state is updated only after clicking on the field or causing CD to run again some other way (ie pressing the submit button twice).
Same example works fine with Angular Material library:
https://stackblitz.com/edit/spdpnj-mh1kbe?file=src%2Fexample%2Finput-form-example.ts
Angular version
17.3.8
Taiga UI version
3.77.0
Which browsers have you used?
- Chrome
- Firefox
- Safari
- Edge
Which operating systems have you used?
- macOS
- Windows
- Linux
- iOS
- Android
Related discussion
This is expected, all our components use OnPush and simply marking them as touched does not notify us. You need to run updateValueAndValidity so that statusChange stream is triggered. You can use this helper for recursive trigger for entire form groups:
https://github.com/taiga-family/taiga-ui/blob/v3.x/projects/cdk/utils/miscellaneous/mark-control-as-touched-and-validate.ts
- The "Angular Material" example works fine with
OnPushCD strategy: https://stackblitz.com/edit/spdpnj-mh1kbe?file=src%2Fexample%2Finput-form-example.ts - Your own forms demo does show
tui-errorerror messages after callingform.markAllAsTouched()but the invalid inputs do not get red borders.
tuiMarkControlAsTouchedAndValidate(formGroup) works as advertised but I still think form.markAllAsTouched() should mark inputs as invalid like it does in Material library.
In 4.0 there will be no nesting of components so it should start behaving like material in that regard.
Any idea when it might be released?
I hope in a month, cdk is already fully refactored and we keep moving everything into standalone. I expect to finish core package this week. We still need to rework all the textfield controls, though.