Ionic-framework: Please provide option to validate form elements like <ion-input>, <ion-select>, <ion-textarea>

[TheMohanraj]

ionic v2

[jgw96]

Hello, thanks for opening an issue with us! You can already do form validation in Ionic 2 using the angular 2 forms/formbuilder module. Thats the great thing about Ionic 2, it includes all the awesomeness from Angular 2! Here is a link to the Forms docs on the Angular 2 site: https://angular.io/docs/ts/latest/guide/forms.html Thanks again!

[TheMohanraj]

I actually talking about <ion-input>, <ion-select>, <ion-textarea>

[TheMohanraj]

@adamdbradley @brandyscarney Is there a way to validate <ion-input>, <ion-select>, <ion-textarea>

[tlaverdure]

Wanted to point out an issue I've come across using the angular2 formbuilder with an ion-input using the required attribute. If you focus in and then focus out I would expect the input to have the ng-invalid class added, but it doesn't.

To summarize:

• The ion-item class wrapping the ion-input has a the class ng-valid
• The ion-input has the class ng-invalid
• The actual input field has the class ng-valid

See also:
https://forum.ionicframework.com/t/ion-input-and-ion-item-validation-classes-dont-match/48895

[xr0master]

@tlaverdure +1
@brandyscarney Validation works but it has some issues )

First:
.item-inner has padding-right 8px, but ion-input::after hasn't

btw why do you use position: static instead of position: relative?
something like;

.item-input ion-input, .item-input ion-textarea {
    position: relative;
}
ion-input::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    content: "";
}

Second:
ion-select doesn't show an any notification. And it is always valid for NgForm. So I can submit invalid form. I think, it happens, because ngControl can't understand the not input element...

Update:
About second. I was confuse. The ngControl directive works without problem, and if I use [disabled]="!myForm.form.valid" on the submit button, it works like need.

[WHarris22]

What I have noticed is that <ion-item> gets updated with other classes such as ng-dirty and ng-touched but it always stays as ng-valid even when <ion-input> has ng-invalid assigned. Here is an image to show you what I mean...

For me it would be useful if <ion-item> got updated with ng-invalid because I want to be able to change the text color of <ion-label> accordingly. At the minute I don't see a way of targeting it with CSS selectors.

[brandyscarney]

So there is a lot going on on this issue. I'm going to try to address everything but let me know if there is something I miss.

@dheran: I'm not sure what you are looking for in terms of validation. Could you please explain what you mean? The form validation Angular 2 offers should be what you need but if you could explain more of what you want, I can help more. :smile:

@tlaverdure: Thanks for bringing this to our attention. I have fixed this in the repo, and published a nightly version of the framework where it can be tested. Could you please take a look and let me know if you find any issues? To install the nightly version:

npm install --save [email protected]

If you haven't updated to beta.7 yet please follow the guide in the changelog to update: https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#angular-update-to-200-rc1

@xr0master: Thanks for letting me know about the UI issues. I've updated the UI to extend the length of the item and added Sass variables for turning off success/error highlighting:

$text-input-md-show-success-highlight:      true !default;
$text-input-md-show-error-highlight:        true !default;

There is another issue for this (#5052), could you please put any feedback you have for improving success/error highlighting on that issue?

@WHarris22 I believe your issue is the same as @tlaverdure mentioned. Please read my above response to him.

Here's a gif of my most recent changes:

Source code for this is here:
https://github.com/driftyco/ionic/tree/7c0fe93061fc17d1e023698983b7b58d9b82f0a9/src/components/input/test/form-inputs

Thanks everyone! :smile:

[xr0master]

@brandyscarney Very cool! Can you implement it for ion-select too, please? And can you append ability to change the line color? It'll be amazing.

BTW iOS hasn't this validation syntax (bottom line); It will be fixed? Or iOS hasn't validation style?

About the another issue (https://github.com/driftyco/ionic/issues/5052). I think no special about it, any container with ngSwitch directive. Something like a ngMessages directive of md, IMO. You need be carefully with a long text and an animation (changing the error message to another). It'll be cool, if we could disable the animation and change the error text color too.

PS Thanks you for your amazing work

[brandyscarney]

Yes, I'll be working on adding it to the select next. :smile:

I'm not sure about adding validation style to iOS, it's something that needs to be discussed.

I agree with the ngMessages directive. There has actually been an issue created with that in mind here: https://github.com/driftyco/ionic/issues/6785

[TheMohanraj]

@brandyscarney after updating to beta 8, ion-textarea and ion-input adding border bottom automatically. Is there a way to prevent this?

[brandyscarney]

@dheran

The highlighting can be turned off via the following Sass variables:

$text-input-md-show-success-highlight:      false;
$text-input-md-show-error-highlight:        false;

and to change the colors:

// Input highlight - normal
$text-input-md-highlight-color:             color($colors-md, primary);

// Input highlight - valid
$text-input-md-hightlight-color-valid:      color($colors-md, secondary);

// Input highlight - invalid
$text-input-md-hightlight-color-invalid:    color($colors-md, danger);

The issue is a WIP so please add any feedback on #5052. Thanks!

[WHarris22]

As I discussed in this closed issue I think it would be useful to be able to validate inputs inside the alert prompt component.

Not sure how you could go about this, but one idea is to have more options under the input option to provide validators and error messages?

e.g.

inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password',
        validation: [ { validator: 'type of validation', message: 'error message' } ]
      }
    ]

[AntoineGermanique]

Hi,
Is required supposed to work on ion-select now ? For me it doesn't .
Thanks for your help!

[BradyLiles]

Is there any update on making the classes on ion-item for ion-select, etc?
I can do a pull request, but i'm guessing that there needs to be a base class for these controls...
most likely the base class for ion-input: IonicFormInput

And will need to implement some common functionality among all of them... Like the setControlCssfunction

function setControlCss(element: any, control: NgControl) 
{
  element.setElementClass('ng-untouched', control.untouched);
  element.setElementClass('ng-touched', control.touched);
  element.setElementClass('ng-pristine', control.pristine);
  element.setElementClass('ng-dirty', control.dirty);
  element.setElementClass('ng-valid', control.valid);
  element.setElementClass('ng-invalid', !control.valid);
}

As well as injecting and implementing NgControl into every input control component.

If there is a set way Ionic wants to implement it, I don't want to waste my time doing something that doesn't follow current architecture. So if there is.. any guidance would definitely be appreciated! (:

[abner]

@BradyLiles Have you already started to work on this issue? I want to join forces with you.

[tommck]

ion-select still doesn't work with required attribute

[brianlittmann]

A bit of a hack, but a quick workaround for me for anything other than ion-input was to conditionally add classes based on the FormGroup control's valid state:

<ion-item [class.ng-invalid]="!profileForm.controls.state.valid">
    <ion-label stacked>State</ion-label>
    <ion-select formControlName="state">
        ...
    </ion-select>
</ion-item>

[cyptus]

ionic is automatically validating the input fields, but it misses to update the parent ion-item if a control is marked as touched (markAsTouched() Method on control) from code. I've a next button which should mark all untouched and invalid controls as invalid (red border). i have to update the parent ion-item style manually like this:

html:

<form [formGroup]="personForm">
  <ion-list>
    <ion-item>
      <ion-label color="primary">Name</ion-label>
      <ion-input type="text" placeholder="Name" [(ngModel)]="username" formControlName="username"></ion-input>
    </ion-item>
  </ion-list>
</form>

code:

  next()
  {
    for (var controlName in this.personForm.controls) {
      let ele = document.querySelector('[formControlName="' + controlName + '"]');
      this.personForm.controls[controlName].markAsTouched();

      if(ele) {
        this.setControlCss(ele.parentElement.parentElement.parentElement, this.personForm.controls[controlName]);
      }
    }
  }

  setControlCss(element: any, control: AbstractControl) 
  {
    this.renderer.setElementClass(element, 'ng-untouched', control.untouched);
    this.renderer.setElementClass(element, 'ng-touched', control.touched);
    this.renderer.setElementClass(element, 'ng-pristine', control.pristine);
    this.renderer.setElementClass(element, 'ng-dirty', control.dirty);
    this.renderer.setElementClass(element, 'ng-valid', control.valid);
    this.renderer.setElementClass(element, 'ng-invalid', !control.valid);
  }

see also: https://forum.ionicframework.com/t/ionic-form-validate-from-code-remove-ng-untouched/98010/2?u=cyptus

EDIT:
i've put this into a own feature request (validation border on ion-select) and an bug report (no border on update on ion-item parent):
https://github.com/ionic-team/ionic/issues/12344
https://github.com/ionic-team/ionic/issues/12345

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!