<form [formGroup]="form">
  <div class="p-3 space-y-4">
    <div class="flex flex-col w-full">
      <label>ศูนย์สอบ</label>
      <input #branch_name_th type="text" formControlName="branch_name_th" [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let subject of subjectList | searchAuto : form.value.branch_name_th : 'branch_name_th'"
                    [value]="subject.branch_name_th"
                    (onSelectionChange)="setFormtestcentername(subject,'branch_name_th')"
        >
          {{subject.branch_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-col w-full">
      <label>สนามสอบ</label>
      <input #testing_field_name_th type="text" formControlName="testing_field_name_th" [matAutocomplete]="auto2">
      <mat-autocomplete #auto2="matAutocomplete">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let subject2 of subjectList2 | searchAuto : form.value.testing_field_name_th : 'testing_field_name_th'"
                    [value]="subject2.testing_field_name_th"
                    (onSelectionChange)="setFormtestcentername(subject2,'testing_field_name_th')">
          {{subject2.testing_field_name_th}}
        </mat-option>
      </mat-autocomplete>

    </div>

    <div class="flex flex-col w-full">
      <label>ห้องสอบ</label>
      <input #testing_room_name_th type="text" formControlName="testing_room_name_th" [matAutocomplete]="auto3">
      <mat-autocomplete #auto3="matAutocomplete">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let subject3 of subjectList3 | searchAuto : form.value.testing_room_name_th : 'testing_room_name_th'"
                    [value]="subject3.testing_room_name_th"
                    (onSelectionChange)="setFormtestcentername(subject3,'testing_room_name_th')">
          {{subject3.testing_room_name_th}}
        </mat-option>
      </mat-autocomplete>
    </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>-->
<!--<pre>{{this.data | json}}</pre>-->
<!--<pre>{{this.seatData | json}}</pre>-->
