question-mark
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.

@Ionic/Angular 4.0.0 Angular forms validation status class updates not working (ng-*** != ion-***)

See original GitHub issue

Bug Report

Ionic version:

4.0.0

Current behavior: Using the Angular Reactive Forms API, when markAsTouched() function is called over a FormControl, ng-touched class is applied to the ion-item element but the ion-touched class is not applied.

This problem occurs with each of the Angular Forms markAs*** functions:

  • markAsTouched
  • markAsUntouched
  • markAsDirty
  • markAsPristine
  • markAsPending

(Didn’t take the time to test the reset function, but I suspect that the result will be the same.)

Expected behavior: Whenever an Angular FormControl status changes ng-XXX classes applied to the DOM element are updated. ion-XXX classes should work the same way. On every FormControl status change, ion-XXX classes should also be updated.

Steps to reproduce:

  1. Change the status of a FormControl using the Angular Forms markAsXXX functions.
  2. Inspect the DOM and check the ng-XXX and ion-XXX classes applied to the corresponding ion-item.
  3. ng-XXX classes are applied, ion-XXX classes don’t

Related code:


Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (D:\Users\****\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : not installed

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
Corneel-Dcommented, Feb 28, 2019

This problem also occurs for the setErrors() function. ng-valid/ng-invalid is set correspondingly, but the corresponding ionic ion-valid/ion-invalid class is not changing.

3reactions
nickwingercommented, Feb 28, 2020

How can it be that after 1 year there is no response from Ionic-Team ?? This is a major issue, form validation is completely not in sync with angular and the framework is useless ? When you have a (reactive) angular form and the user presses Submit, not errors are shown, validation is not working. Don’t you think form validation is a key concept in nearly every App ?? I really don’t get, there is not even a usefull documentation on forms on the Ionic Homepage. I don’t understand how you guys can continue working on new versions without providing a framework that has the basic functionality in it…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic/Angular 4.0.0 Angular forms validation status class ...
Expected behavior: Whenever an Angular FormControl status changes ng-XXX classes applied to the DOM element are updated. ion-XXX classes should ...
Read more >
[Ionic v4] Angular form control status classes(ng-*** != ion-***)
We are deveolping a new app using Ionic/angular 4.x and we are finding several problems related to form validation. Ionic v4 components are ......
Read more >
My Form errors are not showing in the form In Ionic App
I am working on the register page in the Ionic App and I have also validated the fields but the errors are not...
Read more >
Validating form input - Angular
Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors that results in...
Read more >
Advanced Forms & Validation in Ionic & Angular | Josh Morony
A FormControl is tied to an input field, it has a value (i.e. the value the user has entered), and a validation state...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found