mirror-cathay/@note/input.html

------------------------------------------------------------
# INPUT
------------------------------------------------------------
<mat-label></mat-label>
<mat-form-field>
  <input
    matInput
    name="KEY"
    #KEY="ngModel"
    [(ngModel)]="dataForm.KEY"
    required
  >
  <mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>
</mat-form-field>

------------------------------------------------------------
# textarea
------------------------------------------------------------

<mat-form-field>
  <mat-label></mat-label>
  <textarea
    matInput
    name="KEY"
    #KEY="ngModel"
    [(ngModel)]="dataForm.KEY"
    required
  >
    </textarea>
  <mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>
</mat-form-field>


------------------------------------------------------------
# SELECT
------------------------------------------------------------

<mat-form-field>
  <mat-label></mat-label>
  <mat-select
    name="KEY"
    #KEY="ngModel"
    [(ngModel)]="dataForm.KEY"
    required
  >
    <mat-option [value]=""></mat-option>
    <mat-option
      *ngFor="let item of select.KEY"
      [value]="item.KEY">
      {{item.KEY}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>
</mat-form-field>


------------------------------------------------------------
# SELECT 2
------------------------------------------------------------

<mat-label></mat-label>
<ng-select
  name="budget_year_uid"
  #KEY="ngModel"
  [(ngModel)]="dataForm.KEY"
  (change)="onSelect()"
  appendTo="body"
  required
>
  <ng-option value=""></ng-option>
  <ng-option
    *ngFor="let item of select.KEY"
    [value]="item.KEY">
    {{item.KEY}}
  </ng-option>
</ng-select>
<mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>

<mat-label></mat-label>
<ng-select
  #KEY="ngModel"
  (change)="onSelectionChange('KEY',$event)"
  [(ngModel)]="dataForm.KEY"
  [items]="select.KEY"
  appendTo="body"
  bindLabel="KEY"
  bindValue="KEY"
  name="KEY"
>
</ng-select>
<mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>

------------------------------------------------------------
# AUTOCOMPLETE
------------------------------------------------------------

<mat-form-field>
  <mat-label></mat-label>
  <input
    matInput
    name="KEY"
    #KEY="ngModel"
    [(ngModel)]="dataForm.KEY"
    [matAutocomplete]="MATAUTO"
  >
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-autocomplete #MATAUTO="matAutocomplete" autoActiveFirstOption>
  <mat-option
    (onSelectionChange)="onSelectionChange('KEY', item)"
    *ngFor="let item of select.KEY | searchAuto : dataForm.KEY : 'KEY'"
    [value]="item.KEY">
    {{item.KEY}}
  </mat-option>
</mat-autocomplete>

------------------------------------------------------------
# DATEPICKER
------------------------------------------------------------
<mat-form-field>
  <mat-label>วันที่</mat-label>
  <input
    matInput
    name="KEY"
    #KEY="ngModel"
    (click)="dpkName.open()"
    [(ngModel)]="dataForm.KEY"
    [matDatepicker]="dpkName"
    readonly
    required
  />
  <mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
  <mat-datepicker #dpkName></mat-datepicker>
  <mat-error *ngIf="isFieldValid(ngf, KEY)"> กรุณากรอกข้อมูล</mat-error>
</mat-form-field>


------------------------------------------------------------
# DIALOG
------------------------------------------------------------
<form #ngf="ngForm" (ngSubmit)="onSubmit(ngf)" autocomplete="off" class="dialog-main dialog-form ">
  <div class="dialog-main">
    <div class="dialog-header">
      <h2>{{title}}</h2>
    </div>
    <div class="dialog-body">


    </div>
    <div class="dialog-footer">
      <button cdkFocusInitial mat-dialog-close mat-raised-button type="button">ยกเลิก</button>
      <button class="bg-bpi-primary-color" color="primary" mat-raised-button type="submit">บันทึก</button>
    </div>
  </div>
</form>


------------------------------------------------------------
# ICON LINK
------------------------------------------------------------
<i [routerLink]="['/app/research-and-evaluation/evaluate-collect/send', item.budget_policy_uid]" class="material-icons" style="cursor: pointer;color: #F8A300;">create</i>