bug: form validation should not show red highlight until user has modified the field

[Marius-Romanus]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

In reactive Angular forms, the ion-items within an ion-input, the highlights are marked in red when they have not yet been touched.

Expected behavior:

They should be blue until they are not touched, even though the validation of required giving an error.

Steps to reproduce:

Create a reactive form group and add the required validation

Related code:

import { ReactiveFormsModule } from '@angular/forms';
imports: [
    ReactiveFormsModule,
    ...
],

formGroup: FormGroup;

constructor(public formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      text: [
        "",
        [Validators.required]
      ]
    });
}

<form [formGroup]="formGroup">
	<ion-item>
		<ion-label floating>Text</ion-label>
		<ion-input type="text" formControlName="text"></ion-input>
	</ion-item>
</form>

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.1000.0
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 10.0.0
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.3.0
   npm    : 6.14.5
   OS     : Windows 10

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Marius-Romanus]

Code reproduction in tab 1 of StackBlitz.

https://stackblitz.com/edit/ionic-v4-angular-tabs-qni8lg?file=src%2Fapp%2Ftab1%2Ftab1.page.ts

Regards

[liamdebeasi]

Thanks for the follow up. Can you please provide some steps to reproduce the issue? The form appears to be functioning correctly when I check the StackBlitz.

[Marius-Romanus]

The strict mode behavior is correct, but it is not correct for a user as far as UX is concerned, since the user has not yet written anything to have it automatically red-marked.
To be correct in my opinion, it should not be marked in red until it is touched or dirty.
Sorry if my English is not entirely correct. Regards

[liamdebeasi]

Thanks! The input is not marked with the red underline until I touch the input. Here is what it looks like when I load the page:

I agree with the behavior you are expecting to see, but that is also the behavior I am experiencing in your code reproduction. Can you please double check your code?