In Angular form invalid inputs do not have red border on submit

[Marina-L-Stoyanova]

Description

We have a simple form with a required input. Without interacting with the inputs I click on the send button. The validation messages appear, but the input is not colored in red.

• igniteui-angular version:
• browser:

Steps to reproduce

1. Use the attached sample, or create one with AppBuilder containing simple form
2. Generate the app
3. When the form loads click on the Submit button

Result

The validation message appears, but the input is not colored in red

Expected result

the Required input should have red border

Attachments

Attach a sample if available, and screenshots, if applicable.

Sample:

angular-standalone-touched.zip

[hanastasov]

I think is the same as https://github.com/IgniteUI/igniteui-angular/issues/15977

[Marina-L-Stoyanova]

After further investigation I noticed, that if you click in the input once it doesn't change the border color, if you click again the border color will change.

[viktorkombov]

I think that this issue is not with the input group component or the input directive. The directive recalculates validity only when certain events fire - value changes, blur, or ngControl status changes:

If you need to re-check the form, you should trigger a status recalculation on each control before asserting validity:

if (this.categoryDtoFormModel.invalid)
  for (const ctrl of Object.values(this.categoryDtoFormModel.controls)) {
    ctrl.markAsTouched();
    ctrl.updateValueAndValidity();
  }
}

Please note that this code works only for a flat form group. For nested groups, it should be called recursively.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.