angular2-boiler-plate/src/app/sui/sui.form/sui.input.component.html

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

<label [attr.for]="field.key" class="sui-label">{{field.label}}</label>

<input *ngIf="field.type!='select' && field.type!='checkbox' && field.type!='file' && field.type!='radio'" 
        [id]="field.key" 
        [name]="field.key"
        [type]="field.type" 
        class="sui-input" 
        [(ngModel)]="field.value" 
        (blur)="validateField(field)" 
        [placeholder]="field.placeholder"
        [disabled]="field.disabled"
        [readonly]="field.readonly">

<input *ngIf="field.type=='checkbox'" 
        [id]="field.key" 
        [name]="field.key" 
        type="checkbox" 
        class="sui-checkbox" 
        [(ngModel)]="field.value"
        (ngModelChange)="validateField(field)" 
        [disabled]="field.disabled" 
        [readonly]="field.readonly">

<p *ngIf="field.type=='radio'">
<label  *ngFor="let item of field.options" class="sui-validate"> 
     <input 
        [name]="field.key" 
        type="radio" 
        class="sui-radio" 
        [value]="item"
        (click)="field.value=item"
        [checked]=" field.value && item && item ==field.value"
        [disabled]="field.disabled" 
        [readonly]="field.readonly">   
        {{item}} <br>
</label>
</p>

        
        
<input *ngIf="field.type=='file'" 
        [id]="field.key" 
        [name]="field.key" 
        type="file" 
        [multiple]="field.multiple"
        [accept]="field.accepts" 
        (change)="fileChange($event,field)" 
        [placeholder]="field.placeholder" 
        [disabled]="field.disabled" 
        [readonly]="field.readonly">
<p *ngIf="field.type=='file' && field.value &&  field.controlType == 'image'">
        <img *ngFor="let item of field.value"   [src]="item.base64" />
</p>
<p>
    <select [id]="field.key" 
            [name]="field.key" 
            [(ngModel)]="field.value" 
             (blur)="validateField(field)" 
            *ngIf="field.controlType=='dropdown'" 
            class="sui-select">
                        <option style="display:none" value="">Choose an option</option>
                        <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
    </select>
</p>
<span *ngIf="!isValid && validationMessage.length" class="sui-text-error"> {{validationMessage}} </span>