Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-item don't changes ion-untouched to ion-touched on form markAllAsTouched();

See original GitHub issue

Prerequisites

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

ion-item class="ion-untouched ion-pristine ion-invalid item-interactive item-input item ios item-fill-none in-list hydrated item-label item-label-floating"

Expected Behavior

After form submitting i use markAllAsTouched() in previous versions it worked well

ion-item class="ion-touched ion-pristine ion-invalid item-interactive item-input item ios item-fill-none in-list hydrated item-label item-label-floating"

Steps to Reproduce

just place ion-item with ion-input inside form element

Code Reproduction URL

https://github.com/sean-perkins/gh-24483-form-touched

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (....../.nvm/versions/node/v16.13.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.1.2
   @angular-devkit/schematics    : 13.1.2
   @angular/cli                  : 13.1.2
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.13.0 (....../.nvm/versions/node/v16.13.0/bin/node)
   npm    : 8.1.4
   OS     : macOS Monterey

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

luke37bcommented, Dec 23, 2021

I’m experiencing the same issue after updating to Ionic 6 today.

1reaction

sean-perkinscommented, Jan 5, 2022

Thanks for reporting this issue 👍 I’ve created a reproduction app to help test the end solution.

https://github.com/sean-perkins/gh-24483-form-touched

Top Results From Across the Web

Reactive Forms - mark fields as touched - Stack Overflow

The main problem is that if I do not touch fields and try to submit form - validation error in not shown up....

Best Way To Use markAllAsTouched in Angular Forms

Working with the angular reactive form you must have an encounter with markAsTouched() or markAllAsTouched() of the reactive forms.

AbstractControl - Angular

Marks the control as touched . A control is touched by focus and blur events that do not change the value. See also:...

Quick Tip for Angular Forms: Keep your markAllAsTouched DRY

Working with Angular Forms validation you've probably used the following code in ... And in each submit handler you've called markAllAsTouched() to cover ......

Angular Reactive Forms: trigger validation on submit

We also do not display any validation error message. ... constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.form = this.