<div class="mdl-textfield mdl-js-textfield number-widget {{field.className}}"
     [class.number-widget__invalid]="!field.isValid">
    <label [attr.for]="field.id">{{field.name}}</label>
    <input class="mdl-textfield__input"
           type="text"
           pattern="-?[0-9]*(\.[0-9]+)?"
           [attr.id]="field.id"
           [attr.required]="isRequired()"
           [value]="field.value"
           [(ngModel)]="field.value"
           (ngModelChange)="checkVisibility(field)"
           [disabled]="field.readOnly"
           placeholder="{{field.placeholder}}">
    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>
