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 }}
        </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 }}
        </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 }}
        </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 }}
        </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.Link Savings Account" | translate }}</mat-label>
      <mat-select formControlName="linkAccountId" required>
        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
          {{ account.accountNo }}
        </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>

    <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 }}
        </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>