Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 8.0.2
"@nativescript/angular": "~12.0.0",
"@nativescript/core": "~8.0.0",
"@nativescript/ios": "8.0.0",
Describe the bug
When using reactive forms with angular the css styles are not applied correctly to the input TextField. It seems like the CSS classes are always applied onn character input too late.
i.e. first validation result does not provide an update of attached css classes of the view (ng-dirty, ng-valid)
after input of second character, validation result css classes of first result are shown,
and so on...
To Reproduce
Please see attached demo project
Expected behavior
Please try in first textfield of demo:
- input character 'a'
Expectation: css classes should be set to: ng-dirty, ng-valid (but this does not happen)
- add second character
Expectation: css classes should be set to: ng-dirty, ng-valid ( now we see expected behavior, however this is from
result one.
To prove this, use second textfield which validates integers:
- add a first number '1' : expected ng-dirty, ng-valid (is not appearing)
- add as a second character a letter i.e. 'a'
Expected behavior: ng-dirty, ng-invalid.
However, now we are now seeing ng-dirty, ng-valid from previous validation result. Please play around with it. It is obvious, that the validation result is always set one character to late.
Sample project
reactive-forms.zip
Environment
Provide version numbers for the following components (information can be retrieved by running
tns infoin your project folder or by inspecting thepackage.jsonof the project):"@nativescript/angular": "~12.0.0",
"@nativescript/core": "~8.0.0",
"@nativescript/ios": "8.0.0",
Describe the bug
When using reactive forms with angular the css styles are not applied correctly to the input TextField. It seems like the CSS classes are always applied onn character input too late.
i.e. first validation result does not provide an update of attached css classes of the view (ng-dirty, ng-valid)
after input of second character, validation result css classes of first result are shown,
and so on...
To Reproduce
Please see attached demo project
Expected behavior
Please try in first textfield of demo:
Expectation: css classes should be set to: ng-dirty, ng-valid (but this does not happen)
Expectation: css classes should be set to: ng-dirty, ng-valid ( now we see expected behavior, however this is from
result one.
To prove this, use second textfield which validates integers:
Expected behavior: ng-dirty, ng-invalid.
However, now we are now seeing ng-dirty, ng-valid from previous validation result. Please play around with it. It is obvious, that the validation result is always set one character to late.
Sample project
reactive-forms.zip