Ionic 2 form input starting values error?

Ionic Framework ionic-v3
1

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?

2

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

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

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

1 Like
3

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.

4

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.

5

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

1 Like
6

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?).

7

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

https://github.com/driftyco/ionic2/issues/852

8

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.

9

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

10

From live example:
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

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

11

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

Thanks! :slight_smile:

12

Done.