widget doctor quota html

<section id="group-doctor-quota">
  <div class="row">
    <div class="col-md-8 offset-2">
      <form [formGroup]="postQuotaForm" novalidate (ngSubmit)="save(postQuotaForm)">
        <table class="table table-bordered">
          <tr>
            <td>Doctor</td>
            <td>Quota / Hour</td>
            <td>Reservation</td>
            <td>Walk In</td>
            <td></td>
          </tr>
          <tr>
            <td><input class="form-control" placeholder="Search doctor ..." formControlName="search_doctor_query" #search_doctor_query></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <select class="form-control" formControlName="quota_doctor_id" #quota_doctor_id>
                <option *ngFor="let doctor of doctors let i=index" value="{{doctor.doctor_id}}" >{{doctor.doctor_name}}</option>
              </select>
            </td>
            <td>
              <input class="form-control" type="number" min="1" max="3" formControlName="quota_per_hour" #quota_per_hour>
            </td>
            <td>
              <input class="form-control" type="number" min="1" max="3" formControlName="quota_reservation" #quota_reservation>
            </td>
            <td>
              <input class="form-control" type="number" min="1" max="3" formControlName="quota_walkin" #quota_walkin>
            </td>
              <td>
                <button class="btn btn-light" [disabled]="!postQuotaForm.valid">Save</button>
              </td>
          </tr>
          <div formArrayName="newQuota">
          <tr *ngFor="let newquota of postQuotaForm.controls.newQuota.controls; let i=index">
            <!--<td>-->
              <!--<select class="form-control" formControlName="new_quota_doctor_id">-->
                <!--<option>dr. B</option>-->
                <!--<option>dr. A</option>-->
                <!--<option>dr. C</option>-->
              <!--</select>-->
            <!--</td>-->
            <!--<td><input class="form-control" type="number" min="1" max="3" value="" formControlName="new_quota_per_hour"></td>-->
            <!--<td><input class="form-control" type="number" min="1" max="3" value="" formControlName="new_quota_reservation"></td>-->
            <!--<td><input class="form-control" type="number" min="1" max="3" value="" formControlName="new_quota_walkin"></td>-->
            <!--<td></td>-->
            <td>
              <div [formGroupName]="i">
                <input class="form-control" type="number" min="1" max="3" formControlName="coba">
              </div>
            </td>
          </tr>
          </div>
        </table>
      </form>
    </div>
    <div class="col-md-8 offset-2">
      {{postQuotaForm.value | json}}
    </div>
  </div>
  <simple-notifications [options]="options"></simple-notifications>
</section>