Angular 2 Material: "Expression was changed [..]" with mdInput

Question

<md-input-container>
   <input mdInput type="number" min="0" [(ngModel)]="troup.amount" *ngIf="wave.Mode === SimulationModes.Normal">
</md-input-container>

I've recently updated from the previous version of material angular to the newest one, and needed to change all my inputs to match the new criteria with <md-input-container> instead of <md-input>.

When compiling, I get a Zone Error telling that the value changed from "undefined" to ''.

score 0 · Accepted Answer · answered Feb 23 '17 at 09:30

In order to make it work, you no longer should put any *ngIf in the mdInput directive, but this should be placed on the container instead:

<md-input-container *ngIf="wave.Mode === SimulationModes.Normal">
   <input mdInput type="number" min="0" [(ngModel)]="troup.amount">
</md-input-container>

This solves the issue.

Angular 2 Material: "Expression was changed [..]" with mdInput

1 Answers1