<form [formGroup]="dataPenggajianForm">
            <div class="row">
              <div class="col-md-4 col-sm-12">
                <ng-template #payrollGroupOptTemplate let-item="item">{{ item.name }}</ng-template>
                <app-dropdown-obj id="payrollGroup" placeholder="{{ 'KelompokPayroll' | translate }}" name="payrollGroup" floatLabel="true"
                  formControlName="payrollGroup" [items]="payrollGroupList" [withAll]="true" [optionTemplate]="payrollGroupOptTemplate">
                </app-dropdown-obj>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-sm-12">
                <app-number id="gaji" name="gaji" placeholder="{{ 'Gaji' | translate }}" formControlName="gaji" message="trxInputKaryawan"
                  errorKey="gaji"></app-number>
              </div>
              <div class="col-md-4 col-sm-12">
                <app-number id="gaji" name="gaji" placeholder="{{ 'GajiSetelahProbation' | translate }}" formControlName="gaji" message="trxInputKaryawan"
                  errorKey="gajiSetelahProbation"></app-number>
              </div>
            </div>
            <div class="app-table-container">
              <div class="app-table-container-header">
                <label class="app-table-container-header-label">
                  {{ 'UpahAcuanMinimum' | translate }} :
                </label>
              </div>
              <div class="app-table">
                <p-table class="app-primeng-table" [value]="tunjanganList">
                  <ng-template pTemplate="header">
                    <tr>
                      <th class="delete"></th>
                      <th>{{ 'Tunjangantetap' | translate }}</th>
                      <th>{{ 'Nilai' | translate }}</th>
                      <th>{{ 'Catatan' | translate }}</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-rowData let-index="rowIndex" let-columns="columns">
                    <tr>
                      <td class="delete">
                        <button mat-icon-button (click)="delete(rowData)">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </td>
                      <td>
                        <ng-template #incomeDeductionOptTemplate let-item="item">{{ item.name }}</ng-template>
                        <app-dropdown-obj id="incomeDeduction-{{ index }}" name="incomeDeduction-{{ index }}" placeholder="{{ 'Tunjangantetap' | translate }}"
                          floatLabel="true" [(ngModel)]="rowData.incomeDeduction" [items]="incomeDeductionList" [optionTemplate]="incomeDeductionOptTemplate">
                        </app-dropdown-obj>
                      </td>
                      <td>
                        <app-number id="nilai-{{ index }}" name="nilai-{{ index }}" placeholder="{{ 'Nilai' | translate }}" [(ngModel)]="nilai" message="trxInputKaryawanDetailTunjangan"
                          errorKey="nilai" required></app-number>
                      </td>
                      <td>
                        <app-text id="catatan-{{ index }}" name="catatan-{{ index }}" placeholder="{{ 'Catatan' | translate }}" [(ngModel)]="rowData.catatan"
                          message="trxInputKaryawanDetailTunjangan" errorKey="catatan" required></app-text>
                      </td>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="emptymessage" let-columns>
                    <tr>
                      <td align="center" colspan="4">
                        {{ 'Datatidakditemukan' | translate }}
                      </td>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
            </div>
          </form>
          <div class="break-line"></div>
          <form [formGroup]="tunjanganForm">
            <div class="row">
              <div class="col-md-4 col-sm-12">
                <ng-template #incomeDeductionOptTemplate let-item="item">{{ item.name }}</ng-template>
                <app-dropdown-obj id="incomeDeduction" name="incomeDeduction" placeholder="{{ 'Tunjangantetap' | translate }}" floatLabel="true"
                  formControlname="incomeDeduction" [items]="incomeDeductionList" [optionTemplate]="incomeDeductionOptTemplate">
                </app-dropdown-obj>
              </div>
              <div class="col-md-4 col-sm-12">
                <app-number id="nilai" name="nilai" placeholder="{{ 'Nilai' | translate }}" fromControlName="nilai" message="trxInputKaryawanDetailTunjangan"
                  errorKey="nilai" required></app-number>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-sm-12">
                <button mat-button mat-flat-button color="primary" (click)="addDetailTunjangan()" [disabled]="tunjanganForm.invalid">{{ 'Simpan' | translate }}</button>
              </div>
            </div>
          </form>