Input Html

input-field.html

<div class="form-group" [class.has-warning]="!myControl.valid && myControl.touched">
<label *ngIf="type !== 'checkbox'">{{label}}</label>
<input *ngIf="type === 'text'" [type]=type class="form-control"
[(ngFormControl)]=myControl [requiredVal]=required
[patternValidator]="pattern" [focusOn]=focusOn
>
<input *ngIf="type === 'number'" [type]=type class="form-control"
[(ngFormControl)]=myControl [requiredVal]=required
[min]=min [max]=max [focusOn]=focusOn
>
<input *ngIf="type === 'checkbox'" type=checkbox
[(ngFormControl)]=myControl [requiredVal]=required
>
<label *ngIf="type === 'checkbox'">{{label}}</label>
<span class="ng-messages" [hidden]="myControl.valid">
        <p class="text-help small" *ngIf="myControl.errors?.required">Required field</p>
        <p class="text-help small" *ngIf="myControl.errors?.invalidPattern">{{label}} is invalid</p>
        <p class="text-help small" *ngIf="myControl.errors?.min">The mininim value for {{label}} is {{min}}</p>
        <p class="text-help small" *ngIf="myControl.errors?.max">The maximum value for {{label}} is {{max}}</p>
</span>
</div>
<p *ngIf="details" class="text-help small">{{details}}</p>