cbsnexora/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html

<form [formGroup]="fixedDepositAccountSettingsForm">
  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
      <input type="number" matInput formControlName="lockinPeriodFrequency" />
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
      <mat-select formControlName="lockinPeriodFrequencyType">
        <mat-option
          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
          [value]="lockinPeriodFrequencyType.id"
        >
          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Deposit Term' | translate }}</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
      <input type="number" matInput formControlName="minDepositTerm" required />
      <mat-error>
        {{ 'labels.inputs.Minimum Deposit Term Frequency' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
      <mat-select formControlName="minDepositTermTypeId" required>
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
      <input type="number" matInput formControlName="inMultiplesOfDepositTerm" />
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
      <mat-select formControlName="inMultiplesOfDepositTermTypeId">
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Maximum Deposit Term' | translate }}</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
      <input type="number" matInput formControlName="maxDepositTerm" />
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
      <mat-select formControlName="maxDepositTermTypeId">
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-divider fxFlex="98%"></mat-divider>

    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Interest Transfer' | translate }}</h3>

    <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="transferInterestToSavings" class="margin-b">
      {{ 'labels.inputs.Transfer Interest to Linked Savings Account' | translate }}?
    </mat-checkbox>

    <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.contains('linkAccountId')" class="margin-b">
      <mat-label>{{ 'labels.inputs.Linked Savings Account' | translate }}</mat-label>
      <mat-select formControlName="linkAccountId" required>
        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
          ({{ account.accountNo }}) {{ account.savingsProductName }}
        </mat-option>
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Linked Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-divider fxFlex="98%"></mat-divider>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Maturity Instructions' | translate }}</mat-label>
      <mat-select formControlName="maturityInstructionId">
        <mat-option *ngFor="let maturityInstruction of maturityInstructionOptions" [value]="maturityInstruction.id">
          {{ maturityInstruction.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field
      fxFlex="48%"
      *ngIf="fixedDepositAccountSettingsForm.contains('transferToSavingsId')"
      class="margin-b"
    >
      <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
      <mat-select formControlName="transferToSavingsId" required>
        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
          ({{ account.accountNo }}) {{ account.savingsProductName }}
        </mat-option>
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-divider fxFlex="98%"></mat-divider>

    <h4 fxFlex="23%" class="mat-h4">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>

    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
      {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
    </mat-checkbox>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
      <input type="number" matInput formControlName="preClosurePenalInterest" />
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
      <mat-select formControlName="preClosurePenalInterestOnTypeId">
        <mat-option
          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
          [value]="preClosurePenalInterestOnType.id"
        >
          {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <ng-container *ngIf="fixedDepositAccountSettingsForm.controls.withHoldTax">
      <mat-divider fxFlex="98%"></mat-divider>

      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-p">
        {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
      </mat-checkbox>

      <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25">
        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
        <input matInput formControlName="taxGroupId" />
      </mat-form-field>
    </ng-container>
  </div>

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
    <button mat-raised-button matStepperPrevious>
      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Previous' | translate }}
    </button>
    <button mat-raised-button matStepperNext>
      {{ 'labels.buttons.Next' | translate }}
      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
    </button>
  </div>
</form>