Pristine and untouched ion-input css class going to 'input-has-value' when the input has no value. Causing ion-floating label to start out as floating.

[Mikodin]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Floating labels within formGroups inside ion-items are consistently in the 'floating' state. This I believe is due to the fact that the ion-item is getting the class 'input-has-value' applied to it.

Expected behavior:

The labels to sit as placeholders in the input fields until the user clicks on the input or has typed in the input and have the labels float above the input field.

Steps to reproduce:
http://plnkr.co/SYJHsG0NXzK4gbPzwA7X

Related code:
sign-up.ts (Adding the validator, the zip property isn't being touched again)

this.signupForm = this.formBuilder.group({
			zip: ['', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(5), Validators.pattern('[0-9]{5}')])],
			expDate: ['', Validators.required],
		});

sign-up.html

<ion-item `text-wrap>`
  <ion-label floating>ZIP Code</ion-label>
  <ion-input type="tel" 
    [(ngModel)]="signupForm.zip" 
    formControlName="zip" 
    maxlength="5">
  </ion-input>
</ion-item>

The outputted HTML is
<ion-item class="item item-block item-md item-label-floating item-input ng-untouched ng-pristine ng-invalid input-has-value" text-wrap="">....</ion-item>

And on inspecting the signupForm object, the zip property is undefined.

The input-has-value css class is what is causing the label to be floating as opposed to sitting as a placeholder

One thing to note as well is that this has no issues with the floating

<ion-item text-wrap>
  <ion-label floating>Expiration Date</ion-label>
  <ion-datetime 
    displayFormat="MM/YYYY" 
    [min]="minDate" 
    [max]="maxDate" 
    pickerFormat="MMMM YYYY" 
    [(ngModel)]="signupForm.expDate"
      formControlName="expDate">
  </ion-datetime>
</ion-item>

Other information:

We just upgraded from Ionic 2.0.0-rc.2 and this was not an issue in v2.0.0-rc.2

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.7.3
Xcode version: Not installed

Thanks guys!

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[Mikodin]

Hey guys, figured I'd close this up!
This issue has nothing to do with Ionic and instead may have been a change that happened in Angular (to explain why it used to work for us) but in the long run, it was just user error.

For anyone else who may see this, it has to do with the way I was binding my validator to the form.

this.signupForm = this.formBuilder.group({
  zip: ['', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(5),Validators.pattern('[0-9]{5}')])]
});

And inside the HTML, I was using [(ngModel)]="signupForm.zip" as my bounded model

This should actually be

this.signupForm = this.formBuilder.group({
  zip: [this.zip, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(5),Validators.pattern('[0-9]{5}')])]
});

And inside the HTML, use [(ngModel)]="zip"

Here's the plnkr for anyone interested http://plnkr.co/VO0Vm6sKjkEMuu1d3gjT

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