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

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

[liamdebeasi]

Thanks! That makes sense. I agree that this UX can be improved.

Our inputs should align more closely with this example: https://v7.material.angular.io/components/form-field/overview#error-messages. Specifically, the input should be highlighted blue when the user is initially editing the input, and then it should be red when the input is blurred and the validation fails.

[ntorrey]

Is there a workaround to use while we wait for this to be updated?