How to simplify a complex components into ui-model

Tags:

SuMoTuWeThFrSa
5 26 27 28 29 30 31 1
6 2 3 4 5 6 7 8
7 9 10 11 12 13 14 15
8 16 17 18 19 20 21 22
9 23 24 25 26 27 28 29
10 1 2 3 4 5 6 7
  • The value cannot be blank
No documentation yet

Authors:Zhicheng Wang

<div class="form-group">
  <label>
    <input [(ngModel)]="disabled" class="form-check-input" name="disabled" type="checkbox"/>
    Disabled
  </label>
</div>
<div class="form-group" uiFormField>
  <input type="date" [disabled]="disabled" required class="form-control" [(ngModel)]="value"/>
  <ui-field-error></ui-field-error>
</div>

<div class="form-group" uiFormField>
  <ui-calendar name="date" [disabled]="disabled" [(ngModel)]="value" required></ui-calendar>
  <ui-field-error></ui-field-error>
</div>

<div class="form-group dropdown" uiToggle #picker="uiToggle" (uiClickOutside)="picker.close()">
  <div class="input-group" uiFormField>
    <input type="text" [disabled]="disabled" uiDateInput required class="form-control"
           [(ngModel)]="value"/>
    <div class="input-group-append">
      <button type="button" [disabled]="disabled" class="btn btn-primary" (click)="picker.toggle()">
        <i class="fa fa-calendar"></i>
      </button>
    </div>
    <ui-field-error></ui-field-error>
  </div>
  <div *ngIf="picker.isOn" class="dropdown-menu">
    <ui-calendar name="date" [disabled]="disabled" [(ngModel)]="value" required
                 (change)="picker.close()"></ui-calendar>
  </div>
</div>

<div class="form-group" uiFormField>
  <ui-date-picker [disabled]="disabled" [(ngModel)]="value"></ui-date-picker>
  <ui-field-error></ui-field-error>
</div>

<div *ngIf="value" class="alert alert-info">
  <div *ngIf="value|isValidDate">
    {{value.toISOString()}}
  </div>
  <div *ngIf="value|isInvalidDate">
    Invalid Date
  </div>
</div>