md-input placeholder does not move up after model update / also after *ngIf

[ktersius]

Running material beta 6 and ng 4.0.3, Chrome Version 58.0.3029.110 (64-bit)

I have two issues.

1. After loading and setting the model in the promise .then() the input placeholders do not not move up. I can solve this by calling ChangeDetectorRef.detectChanges() after setting the model, which should not be needed correct? Or by interacting with the form.

 this.clientService.getClient(clientId)
        .then((client: any) => {
          this.client = new Client(client);
          // this.ref.detectChanges();
        });

2. I have a group box selection and if I toggle this, which causes elements to be shown or hidden the placeholders again fail to move up.

An html snippet of the template with the *ngIf

    <md-radio-group  fxFlex="0 1 auto" [(ngModel)]="client.type">
      <md-radio-button value="Personal">Personal</md-radio-button>
      <md-radio-button value="Business">Business</md-radio-button>
    </md-radio-group>

   <div fxFlex="50" fxFlex.lt-md="100">
      <md-input-container>
        <input mdInput [(ngModel)]="client.name" placeholder="Name" required>
      </md-input-container>
    </div>

    <div *ngIf="isPersonal()" fxFlex="50" fxFlex.lt-md="100">
      <md-input-container>
        <input mdInput [(ngModel)]="client.surname" placeholder="Surname" required>
      </md-input-container>
    </div>

[hecof]

Same behavior:

    <div style="display:flex; flex-direction: column;" *ngIf="_showProcess">
        <md-input-container>
          <input mdInput placeholder="Module">
        </md-input-container>
        <div>
          <button md-raised-button color="primary" (click)="_process($event)">Process</button>
        </div>
    </div>

[YeomansIII]

Same issue here.
This is only occurring when using OnPush change detection strategy. Fields are populating but the placeholder is not moving up.

  editProfile() {
    this.editData = {};
    this.editData.name = this.user.name;
    this.editData.username = this.user.username;
    this.editData.website = this.user.website;
    this.editData.biography = this.user.biography;
    this.editingProfile = true;
    this.ChangeDetectorRef.markForCheck();
  }

[willshowell]

Seems like a dupe of #3005?

[YeomansIII]

@willshowell Looks like it, thanks. Hopefully we can get some progress, that has been open since February.

[mmalerba]

Closing as dupe

[ktersius]

@mmalerba Hi this occurs on Default strategy as well. Is it still a dupe?

@Component({
  selector: 'client-info',
  templateUrl: 'client-info.component.html',
  styleUrls: ['client-info.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})

[willshowell]

@ktersius do you mind reproducing in a plunker?

[ktersius]

@willshowell I've changed those forms to model based forms and I'm not experiencing the issue any longer.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}