Ionic-framework: [V4.Beta-13] Input validation highlight isn't working

[MrSparklle]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/Users/xxx/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

System:

   NodeJS : v8.12.0 (/Users/xxx/.nvm/versions/node/v8.12.0/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug
The border color doesn't change when the field form is invalid.

Steps to Reproduce
1) Create a reactive form with a validator like maxLength:

    this.profileForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(3)]],
    });

2) Create a form and add the reactive text field:

<ion-content padding>
  <form [formGroup]="profileForm">

    <ion-item>
      <ion-label>Name:</ion-label>
      <ion-input formControlName="name"></ion-input>
    </ion-item>

    <pre>{{profileForm.value | json}}</pre>
    <pre>{{profileForm.status}}</pre>

  </form>
</ion-content>

When the field form get invalid the line color below the field didn't change.

Expected Behavior
The line color maybe changed to red or green depends on the field form status.

This feature has been implemented in https://github.com/ionic-team/ionic/issues/14036 but doesn't work properly.

[diver2]

Hi all. I'm having an issue with reactive forms + ionic v4.0.0-beta13 -
I don't know why, but there is a red border that is added to the ion-input element when an ion-input email gets invalid. I can't figure out with inspector which property is that. been doing that for 1h now, and still can't find...
EDIT: it happens with mozilla firefox 63.0 - doesnt happen with chrome... :(
Pls help?
Thanks

[diver2]

it does not happen with ion-input password field (and it also has validation rules)

[orochies]

I have the same behavior with firefox v63, not with chrome, a red border when the reactive form

[Edited]

In firefox v63 shadow dom is enabled:

Go in about:config to:
dom.webcomponents.shadowdom.enabled

When I change to false, everything works correctly, any suggestions because this happens?

[diver2]

mine also only happens with firefox - quick solution: change ion input type to "text"
it happens only with ion-input type = email
my validation is on the reactive forms...
cheers

[wiggitamoo]

The underline color does not change for me when ion-inputs are invalid. I'm using both number and text input types. For me it fails in both Chrome and Firefox.

Chrome Version 70.0.3538.77 (Official Build) (64-bit)
Firefox 63.0.1 (64-bit)
@ionic/angular: "^4.0.0-beta.13"

[jonmikelm]

We haven't been able to make angular reactive forms error highlighting work in any browser. We've just upgraded to beta.16 and nothing seems to have changed.

When an error is assigned to a form control, ion-input elements get ion-invalid and ng-invalid classes, but the highlight color doesn't change.

From debugger:

<ion-input 
    _ngcontent-c2="" ng-reflect-minlength="6" ng-reflect-placeholder="PIN" ng-reflect-readonly="true"
    ng-reflect-type="password" ng-reflect-name="pin" minlength="6" 
    class="ng-untouched ng-pristine ng-invalid ion-untouched ion-pristine ion-invalid in-item hydrated">

Looking at ionic core code, item component's main scss file contains these lines:

https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.scss

// Item Input Invalid
// --------------------------------------------------

:host(.item-interactive.ion-invalid) {
  --highlight-background: var(--highlight-color-invalid);
}

It seems like this is the code that should highlight the inputs when invalid, but this code only applies to ion-item elements. The problem is that ion-invalid class is being set on the inner ion-input, not on the ion-item.

[rosunad]

Upgraded to beta.17 and nothing seems to have changed. ion-input has ion-invalid and ng-invalid but style not applied.

Do we have any news?

[goelectricstations]

same issue on beta 17

[goelectricstations]

workaround:

.invalidItem {
--full-highlight-height: calc(var(--highlight-height) * var(--show-full-highlight));
--inset-highlight-height: calc(var(--highlight-height) * var(--show-inset-highlight));
--border-color: var(--ion-item-border-color,var(--ion-border-color,red));
}

Email

[ZerozAndOnes]

A simple workaround:

<ion-item [class.ion-invalid]="username.hasError('required')">

Thanks to @jonmikelm , This works because the --highlight-background variable is updated when ion-item has the class ion-invalid.

[jakechen0816]

Hello everyone, I upgrade my ionic to 4.0.0 today, and the bottom border is working on browser. However, it is still not working on iOS mode. I tried on my iPhone and chrome mobile mode, both are does not show error colour on the border. Need some help, thanks

[victorS365]

Fixed only for browser and android, on IOS still the same problem.

[hugovisk]

hi, on ionic 4.0.0 i'm experiencing an issue on desktop browsers (chrome and firefox) with default options like described above in the bug report.

If the input has a validation, e.g. required and maxlength(3), than on focus the bottom border becomes red (invalid), after typing turns green (valid). Even an input with no validation on focus it changes to green (valid).

In both cases never turns blue (on focus). The behavior shouldn't be when on focus the bottom border turns blue and when the input parameter touched becomes true it implements the validation?

[ionitron-bot[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.