fix(label): only apply error appearance when control is touched

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Currently the Material design appearance of an invalid ion-label in an ion-item, is applying the error appearance; even though the control has not been interacted with.

Issue Number: #24049

What is the new behavior?

Fixes the change introduced within this PR.

• Aligns v6 label appearance rules to match 5.8.*
• Only applies the invalid error state when the control is touched/interacted with.

Does this introduce a breaking change?

• Yes
• No

Other information

Display state of item when ion-invalid is initially set.

Before	After

I'm unsure of the implications with React/Vue. As far as I know, they don't have a form integration coupled with Ionic. This change is technically only necessary for Angular implementations, unless React/Vue are manually managing ion-touched on the ion-item.

I could see it being advantageous to leave the web component alone and approach fixing this issue from the framework side, so the value accessor would instead apply ion-invalid when the control is invalid and dirty. Let me know if that would be a better fit to align with React/Vue as well.

[liamdebeasi]

This looks great! When you have your environment setup, could you create a development build of Ionic Angular and test this in the example app provided in #24049.

Also let's make sure that this does not break form validation colors when the form is submitted.

[sean-perkins]

This looks great! When you have your environment setup, could you create a development build of Ionic Angular and test this in the example app provided in #24049.

Also let's make sure that this does not break form validation colors when the form is submitted.

Confirmed in #24049 that on initial load with Android/Material design, the form label no longer displays an invalid state, until after interaction/touch.

This resolves the spec requirement for user input patterns.

However, after submit no error indications are present, unless in Angular a developer marks all controls as touched on submit.

onSubmit() {
    // form is the form group variable
    this.form.markAllAsTouched();
}

To my knowledge, framework has historically no implementation around form submissions or Angular's implementation of ng-submitted class. We could possibly ship Angular's framework implementation with a directive attached to [formGroup],[formGroupName] that would allow us to bind to submit and pass that context to the individual controls in the group.