bug: form validation not highlighting errors on mode md

[jongbonga]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

On ionic Angular, the form fields will highlight red for when .markAllAsTouched() for item mode="md".
After upgrading to v6, the behavior is not experienced anymore. the highlight only shows when fields are focused__

Expected Behavior

The form should show (highlight) errors on the fields when submitted or .markAllAsTouched()

Steps to Reproduce

upgrade ionic angular npm install @ionic/angular@next from v5 to v6

<form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
          <ion-list mode="md">
            <ion-item>
              <ion-label position="stacked" >Email Address</ion-label>
              <ion-input  type="email" formControlName="email"></ion-input>
            </ion-item>
            ...
          </ion-list>
</form>

this.loginForm = this.formBuilder.group({
      email: [
        '',
        Validators.compose([
          Validators.maxLength(100),
          Validators.required,
          Validators.email
        ])
      ]
...

onSubmit() {
    this.loginForm.markAllAsTouched();

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/Users/jonathan/.nvm/versions/node/v16.4.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.0-beta.2
@angular-devkit/build-angular : 12.1.2
@angular-devkit/schematics : 12.1.2
@angular/cli : 12.1.2
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.1.2
@capacitor/android : 3.1.2
@capacitor/core : 3.1.2
@capacitor/ios : 3.1.2

Utility:

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

System:

NodeJS : v16.4.2 (/Users/jonathan/.nvm/versions/node/v16.4.2/bin/node)
npm : 7.18.1
OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Could you reproduce this in an Ionic starter app and provide a link to the repo?

[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 reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

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

[jongbonga]

@liamdebeasi Please see reproduction here

on click of the login button

v5 on main branch behaves like expected
v6 on v6 branch doesn't validate the fields

[liamdebeasi]

Thanks for the issue. This has been resolved via #23853, and a fix will be available in an upcoming release of the Ionic Framework v6 beta.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.