<div class="adf-textfield adf-number-widget {{field.className}}"
     [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
    <mat-form-field>
        <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
        <input matInput
               class="adf-input"
               type="text"
               pattern="-?[0-9]*(\.[0-9]+)?"
               [id]="field.id"
               [required]="isRequired()"
               [value]="field.value"
               [(ngModel)]="field.value"
               (ngModelChange)="onFieldChanged(field)"
               [disabled]="field.readOnly"
               placeholder="{{field.placeholder}}">
    </mat-form-field>
    <error-widget [error]="field.validationSummary" ></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
