<form [formGroup]="form">
  <div class="p-3 space-y-4">
    <div class="flex flex-col w-full">
      <label>คณะที่รับผิดชอบ</label>
      <input #res type="text" formControlName="faculty_uid"  [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFacultyname.bind(this)">
        <mat-option *ngFor="let x of faculty | searchAuto : res.value : 'faculty_name_th'"
                    [value]="x.faculty_uid"
        >
          {{x.faculty_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-col w-full">
      <label>รหัสภาควิชา</label>
      <input nospec oninput="value = value.toUpperCase()" type="text" formControlName="department_code">
    </div>

    <div class="flex flex-col w-full">
      <label>ชื่อภาควิชา</label>
      <input type="text" formControlName="department_name_th">
    </div>

    <div class="flex flex-col w-full">
      <label>สถานะ</label>
      <select formControlName="status_id">
        <option *ngFor="let x of statusMock" [ngValue]="x.id">
          {{x.name}}
        </option>
      </select>
    </div>

    <div class="flex flex-row justify-center mt-3 w-full ">
      <button class="search-button mr-3" (click)="save()">บันทึก</button>
      <button class="clear-button" (click)="cancel()">ยกเลิก</button>
    </div>
  </div>
</form>

<!-- <pre>{{form.getRawValue() | json}}</pre>-->
