ionic-framework: ng-valid on required field - ion-item vs ion-input inconsistency

Ionic version: (check one with “x”) [x ] 3.x

I’m submitting a … (check one with “x”) [ x] bug report

Current behavior: A ion-input required with a valid value inside a ion-item is not highlighted correctly. The ion-item has ng-invalid, while the inner ion-input has correctly a ng-valid. So the field is not correctly highlighted

Expected behavior: if the inner ion-input has ng-valid so should have the outer ion-item. A valid input should have the green highlight

Steps to reproduce:

Related code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class Pdv {  
    insegna:String;    
}

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {

  appName = 'Ionic App';
  
  pdv:Pdv = new Pdv();
  
  constructor(public navController: NavController) { }

  ionViewDidLoad(): void {

		this.pdv.insegna = 'Prova';

  }

  
}

<form (ngSubmit)="onSubmit(pdvForm)" #pdvForm="ngForm">
    <ion-list>
      <ion-item>
        <ion-label floating>Insegna</ion-label>
        <ion-input type="text" required [(ngModel)]="pdv.insegna" name="insegna" insegna="ngModel">
/ion-input>
      </ion-item>
    </ion-list>
  </form>

Other information: in v3 does not works. v3 Plunker : https://plnkr.co/edit/p7V3OjAanCXrUO0cAcDN?p=preview

In ionic v2 works. v2 Plunker : https://plnkr.co/edit/ohzPVs1kQD98mGNdf0aT?p=preview

Ionic info:

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 (c:\riquesto2.2\node_modules\@ionic\cli-plugin-cordova)
    @ionic/cli-plugin-ionic-angular : 1.4.0 (c:\riquesto2.2\node_modules\@ionic\cli-plugin-ionic-angular)
    @ionic/cli-utils                : 1.6.0 (c:\riquesto2.2\node_modules\@ionic\cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (c:\riquesto2.2\node_modules\ionic)

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.2.0 windows 4.4.2
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.0
    OS   : Windows 10
    npm  : 3.10.10

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 17 (2 by maintainers)

Most upvoted comments

Serious that after 6 months this issue with a basic feature broken still open?! Do really make sense Ionic team think in a new version if the current version is broken?!

iget-master on Feb 28, 2018

I have the same problem, I think it’s related to https://github.com/angular/angular/issues/14189

For now since I am using reactive forms I use

<ion-item [class.ng-invalid]="!group.get('name').valid">
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>

as a workaround.

Nehluxhes on Aug 2, 2017

It would be great to get a fix on this, that is something really important for end-users experience and the various work around mentioned in this discussion do not work with dynamic forms…

pierresh on Sep 23, 2018

Workaround ( for me ):

<ion-item [class.myInvalid]="usernameCtrl.invalid" [class.myValid]="usernameCtrl.valid">
 <ion-input type="text" #usernameCtrl="ngModel" minlength="3" required'>\</ion-input>
\</ion-item>
~~~~~~~~ CSS ~~~~~~~~~~~~
ion-item.myInvalid { border-left:5px solid red;}
ion-item.myValid   { border-left:5px solid green;}

RoyeA on Feb 13, 2018

months have gone by and nothing happened ? Why are there even issues opened… How do you style validation if this is not working… ion-item sets wrong css classes… the ion-input inside the ion-item is valid, but the parent ion-item is ng-invalid (just because another ion-input (outside this ion-item) is invalid…

nickwinger on Jan 2, 2018

I am experiencing the same issue after running custom validation. Upon Form.controls.input.updateValueAndValidity(); the input gets ‘ng-valid’ class but not the outer ion-item div. @Nehluxhes 's solution did not worked for me so i had following workaround

<ion-item [ngClass]="{'inputvalid':(form.controls.input.valid)}">
 <ion-input type="text" formControlName="input"></ion-input>
</ion-item>

 .inputvalid{
  .item-inner{
     border-bottom-color: #32db64 !important;
     -webkit-box-shadow: inset 0 -1px 0 0 #32db64 !important;
      box-shadow: inset 0 -1px 0 0 #32db64 !important;
    }
 }

ZameelAmjed on Dec 2, 2017