Ionic-framework: <ion-input> is marked as invalid while disabled

[rolandjitsu]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When an <ion-input> is disabled, it marks the field as invalid and it highlights it with red.

Expected behavior:

Making the input disabled should not change the validity of the input.

Steps to reproduce:

Follow this plnkr:

1. Fill both fields
2. Click the login button

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[jgw96]

Hey @rolandjitsu so after researching this a little it seems like this is standard behavior for forms in angular. Would you mind giving this issue a read? If im understanding correctly that issue applies to the behavior we are seeing here, but would love if you could confirm that. Thanks!

[rolandjitsu]

I just read the spec and according to it, DISABLED: control is exempt from validation checks which means from a UX standing point it should be neither valid or invalid.

There should perhaps be an indeterminate state where the input is highlighted with a neutral color, because showing the red color tells the user there is an error, which is not true since we are in the process of determining if there is an error or not.

I thing using the status property would be the best way to determine in which state the input is and use the appropriate color to highlight it's state.

[hotforfeature]

I've run into this problem with my app. It's true that disabled controls are marked as ng-invalid and that is working as intended according to the Angular team in the above linked issue. I have some custom CSS that removes the invalid border if the item has the item-input-disabled class.

The problem lies in src/components/input/input.md.scss:

// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-md-show-invalid-highlight) {
  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
    @include md-input-highlight($text-input-md-highlight-color-invalid);
  }

  .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
    @include md-input-highlight($text-input-md-highlight-color-invalid);

    .item-inner {
      box-shadow: none;
    }
  }
}

and could be fixed with

// Show the invalid highlight when it has the invalid class and has been touched and is not disabled
@if ($text-input-md-show-invalid-highlight) {
  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-disabled) .item-inner {
    @include md-input-highlight($text-input-md-highlight-color-invalid);
  }

  .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-disabled):last-child {
    @include md-input-highlight($text-input-md-highlight-color-invalid);

    .item-inner {
      box-shadow: none;
    }
  }
}

For reference if you need a quick fix, this is my custom sass.

.md { // Add extra selector to avoid CSS specificity problem in order to override rules
  .item-md {
    &.ng-invalid {
      &.ng-touched {
        &:not(.input-has-focus) {
          &.item-input-disabled {
            .item-inner {
              border-bottom: $hairlines-width solid $list-md-border-color;
              box-shadow: none;
            }
          }
        }
      }
    }
  }
}

@import 'ionic.theme.default';

[jgw96]

Hello all! Because this is not an Ionic issue but more of an Angular issue (you can reference the issue i linked to above) I am going to close this issue for now. Thanks for using Ionic!

[hotforfeature]

@jgw96 while I agree that the concept of disabled inputs being programmatically invalid is Angular territory, this is still very much an Ionic issue in terms of UX.

Ionic's current UX displays a red error line in material design when an input is disabled. A material text field should never display a red highlight when it's disabled, it should display the disabled state.

I'd be happy to submit a PR with the above suggested fix if you'd like.

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