Ionic-framework: [Ionic v4-beta.3] ion-input: validation attributes are not working

[brunoalbano]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI) : 4.1.0
   @ionic/core           : 4.0.0-beta.3
   @stencil/core         : 0.11.4
   aurelia-fetch-client  : 1.3.1
   choices.js            : 3.0.4
   handlebars            : ^4.0.11
   ionicons              : ^4.3.0
   quill                 : ^1.3.6
   @stencil/sass         : ^0.1.0

System:

   NodeJS : v8.11.3
   npm    : 5.6.0
   OS     : Windows 10

Describe the Bug
Form input validation like required, maxlength, min, max, etc. are not working inside a form

Steps to Reproduce

      <form>
        <ion-list>
          <ion-item>
            <ion-label position="floating">Input</ion-label>
            <ion-input name="input" required maxlength={150} autofocus></ion-input>
          </ion-item>
        </ion-list>
        <button type="submit">Confirm</button>
      </form>

Expected Behavior
The input field should be validated on form submit.

Additional Context
The ion-input is generating two inputs with the same name: one visible input with validation attributes and one hidden input without the attributes. The form is validation only the hidden input.

[MrSparklle]

The min and max properties also doesn't work:
The input accepts values over 999. The form keeps valid. Tested on BETA-11:

<ion-input type="number" min="0" max="999"></ion-input>

[shlomiLan]

I added a min and required requirements with:

    this.formBuilder.group({
      'feild': [value,  [Validators.required, Validators.min(1)]]
    });

Tested on Ionic 4.1.2

[shlomiLan]

This is my ionic info` result:

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5, ios_old 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5,
cordova-plugin-ionic-webview 1.1.1, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/shlomilanton/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 6.2.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

My field name is payments so this is the code that I use in the template:

        <ion-item>
          <ion-label>Payments:</ion-label>
          <ion-input formControlName="payments" type="number"
[min]="1"></ion-input>
        </ion-item>

and it all works, I have a numeric keyboard, the field is mandatory and the
min value is 1.

Also, why I don't see this your comment on GitHub?

On Thu, Oct 4, 2018 at 5:48 PM MrSparklle [e-mail] wrote:

I added a min and required requirements with:

this.formBuilder.group({
  'feild': [value,  [Validators.required, Validators.min(1)]]
});

Tested on Ionic 4.1.2

It just works if you don't specify the field type. If you specify
type="number" the validation don't occurs.
We need type=number to avoid the user to enter invalid characters and for
display the numeric keyboard on the phone.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/15211#issuecomment-427046620,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMvfEPggByoM_PxpqOxajVMJaxukTpxZks5uhh-2gaJpZM4WA1FE
.

[daraul]

I'm able to validate the input fields using the formgroup, but I can still type invalid values into the field. I thought the directives on the ion-input would prevent that, but this isn't the case.

[manucorporat]

This should be fixed now that shadow-dom has been disabled for ion-input!

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