Ionic-framework: Setting maxlength attribute dynamically since beta 11

[efishman15]

I just finished upgrading to ionic2 beta 11 (and angular rc4) changing my forms to @angular/forms.
With the old forms, I was using ion-textarea with a dynamic value to maxlength, e.g:
[attr.maxlength]="VariableThatHoldsMaxLength"

and the maxlength was copied PROPERLY to the native <textarea> inside.

Since upgrading to beta 11 - this stopped working and I can no longer set it dynamically - it is not being copied to the native element.

If I set a static value like maxlength="5" - it is being copied PROPERLY to the native element.
Trying interpolation like maxlength="{{VariableThatHoldsMaxLength}}" does not work.
Trying "native property" [maxlength]="VariableThatHoldsMaxLength" also does not work.

Thanks,
Eddy

[jgw96]

Hello! Thanks for opening an issue with us! We are currently working on making a doc on how to use the new angular/forms that may help you with this issue. I will keep this issue open for now and then close when that doc is done. Thanks for using Ionic!

[jgw96]

The new docs for forms just got pushed. http://ionicframework.com/docs/v2/resources/forms/ Thanks for using Ionic

[efishman15]

Hello Justin,

Thanks for the forms doc.
It still does NOT address the issue I raised.
How can I set maxlength _dynamically_ for a text input or textarea field?

[jgw96]

@efishman15 Sorry about that. Actually, this should be fixed for good now. We unfortunately did not specify the exact version of @angular/forms in our npm install command in our beta.11 update so it was installing a version that was not compatible with angular 2 rc4. This has since been fixed in the changelog. Would you mind going to your package.json and changing the @angular/forms entry to @angular/[email protected] and then running npm install again? Thanks !

[efishman15]

Hi Jason,

My package.json already points to @angular/forms version 0.2.0 - here are my dependencies from package.json:

"dependencies": {
"@angular/common": "^2.0.0-rc.4",
"@angular/compiler": "^2.0.0-rc.4",
"@angular/core": "^2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "^2.0.0-rc.4",
"@angular/platform-browser": "^2.0.0-rc.4",
"@angular/platform-browser-dynamic": "^2.0.0-rc.4",
"@angular/router": "^2.0.0-rc.2",
"es6-promise": "3.0.2",
"es6-shim": "0.35.0",
"ionic-angular": "^2.0.0-beta.11",
"ionic-native": "^1.1.0",
"ionicons": "^3.0.0",
"reflect-metadata": "0.1.3",
"rxjs": "^5.0.0-beta.6",
"zone.js": "^0.6.12"
}

In any case - I would appreciate if you can answer my question directly - if/once it is resolved - how should I pass the "maxlength" propertly for it to be set dynamically?

Thanks,
Eddy

[jgw96]

Hello! So the syntax you are using for changing maxlength dynamically should work, but we need to get you on the correct version of the forms module first. So because npm follows semver when their is a caret in front of the version, like their currently is for your @angular/forms entry, then it will install the latest minor version of that package, which in this case is 0.3.0, which also does not happen to work with the current version of Ionic 2. So, even though its listed as "@angular/forms": "^0.2.0" you actually have 0.3.0 installed. To fix this you can change it to "@angular/forms": "0.2.0" and run npm install again.

[efishman15]

Hello Justin,

So I took a look inside package.json inside @angular/forms folder - and the version says 0.2.0 and not 0.3.0.
Just to be sure - I removed the caret as you suggested, ran npm install and checked again: no change.
The maxlength attribute is set only on the ion-textarea element and NOT being copied to the textarea native element - thus the field allows me to type unlimited number of characters.

What now?

Eddy

[Cameron637]

I'm having a similar issue setting the max attribute dynamically with ion-input type="date", also on beta 11, also with @angular/forms version 0.2.0. And no, I'm not using the ion-datetime component because my form is in a modal and everytime I exit the datetime component it closes the modal (and it can't be due to the backdrop, I tried that fix already). So unless you have a fix for that I'm sticking with regular input type="date".

[Cameron637]

@efishman15 in the meantime a workaround would be to add the following code to your ionViewDidEnter function:

document.querySelector("#myInput").setAttribute("max", maxValue);

[shaikhspear16]

I am facing the exact issue as @efishman15 after the upgrade to beta 11. Any luck @jgw96 ??

[hadrien-toma]

I am facing the same issue with an <ion-input type="number">, I can't bind to the min, max and step properties as I described in this forum's topic.

My @angular/forms dependency is 2.1.1 and my ionic-angular dependency is 2.0.0-rc.3.

[Barryrowe]

It appears between beta.11 and rc.3, the support for the type="number" attributes (step, min, max) was lost on ion-input.

[brandyscarney]

I am no longer able to reproduce this issue using latest for the following attributes: maxlength, step, min, and max. Please let me know if you are still seeing it using rc.6 and I can reopen. Thanks!

[Shehab-Muhammad]

It's not working with me
Ionic Framework Version: 2.3.0

also my dependencies

"@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",

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