# Ionic 2 form input starting values error?

**URL:** <https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838>\
**Category:** ionic-v3\
**Created:** [December 9, 2015, 2:34pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838 "2015-12-09T14:34:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [December 9, 2015, 2:34pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/1 "2015-12-09T14:34:01Z")

</div>

Hi, i’m trying to make work `ng-class` directive in ionic 2, but it seems it won’t work:

> import {Page, NavController, Popup} from ‘ionic/ionic’;  
> import {NgClass} from ‘angular2/angular2’;

> ```
> @Page({
> 
> ```

```
  templateUrl: 'app/login/login.html',
  directives: [NgClass]
})

```

Then i use in login.html:

> 

```
<ion-input floating-label [ng-class]="{'has-value': true}">
  <ion-label>Username</ion-label>
  <input type="text" [(ng-model)]='user.username' value="">
</ion-input>
<ion-input floating-label [ng-class]="{'has-value': true}">
  <ion-label>Password</ion-label>
  <input type="password" [(ng-model)]='user.password' value="">
</ion-input>

```

What am i doing wrong?

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [December 9, 2015, 4:20pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/2 "2015-12-09T16:20:40Z")

</div>

The syntax is correct, if you change `has-value` to `my-value` you will see the class is added. Why don’t you just add the `has-value` class directly since it always evaluates to true? Without diving into it, it’s probably caused by our JS removing that class because it has no value: [https://github.com/driftyco/ionic2/blob/master/ionic/components/text-input/text-input.ts#L385-L387](https://github.com/driftyco/ionic2/blob/master/ionic/components/text-input/text-input.ts#L385-L387)

If you want to open an issue for it we can look into it some more: [https://github.com/driftyco/ionic2/issues](https://github.com/driftyco/ionic2/issues)

Also, this cheatsheet is awesome for Angular 2 syntax: [https://angular.io/cheatsheet](https://angular.io/cheatsheet)

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [December 9, 2015, 4:29pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/3 "2015-12-09T16:29:04Z")

</div>

I put it to true since i was checking if it worked, i have a variable in component that decides.

What does it mean that ‘it has no value’? it should be a class used by the `ion-input` directive with `floating label` to tell the label of the input to jump up when there’s a value.

PD: I’m trying to do this as i set up a value for the input before rendering, like if you had login before it will store the username and remember it next time, the password too but just for testing so i don’t have to type each time, but the input label doesn’t jump up when id set from start which should.

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [December 9, 2015, 5:00pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/4 "2015-12-09T17:00:33Z")

</div>

The `has-value` class gets added to the `ion-input` when the input inside of it has a value. If the input has no value it won’t get added. You shouldn’t have to add this class as we are doing it already.

I’m not sure I completely understand, but if you have a value initially on load of the page the class should be added, if it isn’t added then it’s a bug and please file an issue.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [December 9, 2015, 5:02pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/5 "2015-12-09T17:02:27Z")

</div>

You did understand, it’s a bug, issue filled: [https://github.com/driftyco/ionic2/issues/710](https://github.com/driftyco/ionic2/issues/710).

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [January 4, 2016, 4:23pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/6 "2016-01-04T16:23:42Z")

</div>

Hi @brandyshea this bug is fixed in the last version of ionic, except for date inputs, it’s the same bug but now it only happens with date inputs (probably is not a good idea to use floating labels with date inputs?).

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [January 4, 2016, 5:02pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/7 "2016-01-04T17:02:19Z")

</div>

Yeah I was able to see this bug, created an issue for it:

[https://github.com/driftyco/ionic2/issues/852](https://github.com/driftyco/ionic2/issues/852)

---

<div class="post-metadata">

**Author:** ![dusk13](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dusk13/32/101283_2.png) [@dusk13](https://forum.ionicframework.com/u/dusk13)\
**Post date:** [June 23, 2016, 9:06am UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/8 "2016-06-23T09:06:06Z")

</div>

Hi @brandyshea,

Could you please confirm that this issue already fixed? Issue link on github is broken.  
I have same issue with beta.9 and number input.

Thank you.

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [June 23, 2016, 4:12pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/9 "2016-06-23T16:12:00Z")

</div>

Yes this should be working now, could you provide the code you’re using for me to reproduce it? Thanks!

---

<div class="post-metadata">

**Author:** ![dusk13](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dusk13/32/101283_2.png) [@dusk13](https://forum.ionicframework.com/u/dusk13)\
**Post date:** [June 23, 2016, 5:15pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/10 "2016-06-23T17:15:48Z")

</div>

From live example:  
[https://github.com/driftyco/ionic-preview-app/blob/master/app/pages/inputs/floating/template.html](https://github.com/driftyco/ionic-preview-app/blob/master/app/pages/inputs/floating/template.html)  
Change type ‘text’ to ‘number’ and enter any text.

`<ion-item> <ion-label floating>Username</ion-label> <ion-input type="number"></ion-input> </ion-item>`

![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/1/71e771ef927788582a9f234f82ad1ffbc86151db.png)

Same issue on Firefox and Chrome browsers and on Android 5.1.1. Can’t check on iOS or Safari.

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [June 23, 2016, 7:24pm UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/11 "2016-06-23T19:24:41Z")

</div>

It seems like this is an issue when a non-number is added to an input with `type="number"`. I can only reproduce it on my desktop Chrome by entering something like `eee` in the field as it won’t let me enter any other letters. Could you create an issue for this? [https://github.com/driftyco/ionic/issues](https://github.com/driftyco/ionic/issues)

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![dusk13](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dusk13/32/101283_2.png) [@dusk13](https://forum.ionicframework.com/u/dusk13)\
**Post date:** [June 24, 2016, 8:06am UTC](https://forum.ionicframework.com/t/ionic-2-form-input-starting-values-error/38838/12 "2016-06-24T08:06:02Z")

</div>

Done.

> <https://github.com/ionic-team/ionic/issues/7037>