Angular Reactive Forms are broken

[cjohn001]

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

[cjohn001]

@edusperoni : Might there be a chance that you will look into this issue? Without reactive forms one has to write a lot of unnecessary boilerplate code, and I do not see how this feature could be used with the bug currently. I have had a look into the project sources but did not find the place where these css classes are set up.

[rob4226]

@cjohn001 I think I ran into this the other day. I ended up having to call markForCheck() on every FormGroup change to fix it. Maybe it will help you:

this.itemFormGroup.valueChanges.subscribe({
  next: (_value) => this._changeDetectionRef.markForCheck(),
});

[cjohn001]

The issue is solved in version 15.0.1