frontend-inversiones/src/app/components/instruments/lete/lete.component.html

<h4 class="card-title">
  Lete
</h4>
<form
  class="form-auth-small ng-untouched ng-pristine ng-valid"
  [formGroup]="investmentProposalForm"
>
  <div class="row">
    <div class="col-lg-6 col-sm-12 pr-xl-5">
      <div class="form-group">
        <label for="valor_nominal">Valor nominal: </label>
        <input
          type="text"
          formControlName="valor_nominal"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.valor_nominal.errors
          }"
        />
        <div
          *ngIf="submitted && f.valor_nominal.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.valor_nominal.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="plazo_dias">Plazo inversión: </label>
        <input
          type="text"
          formControlName="plazo_dias"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.plazo_dias.errors
          }"
        />
        <div *ngIf="submitted && f.plazo_dias.errors" class="invalid-feedback">
          <div *ngIf="f.plazo_dias.errors.required">
            Campo requerido
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 pr-xl-5">
      <div class="form-group">
        <label for="casa">Casa: </label>

        <select
          (change)="onInstrumentChange($event)"
          class="custom-select"
          formControlName="casa"
          [ngClass]="{
            'is-invalid': submitted && f.cod_tarifa.errors
          }"
        >
          <option *ngFor="let item of casa" [value]="item.key">{{
            item.value
          }}</option>
        </select>
        <div *ngIf="submitted && f.casa.errors" class="invalid-feedback">
          <div *ngIf="f.casa.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="base_dias">Año base: </label>

        <select
          (change)="onInstrumentChange($event)"
          class="custom-select"
          formControlName="base_dias"
          [ngClass]="{
            'is-invalid': submitted && f.cod_tarifa.errors
          }"
        >
          <option *ngFor="let item of base_dias" [value]="item.key">{{
            item.value
          }}</option>
        </select>
        <div *ngIf="submitted && f.base_dias.errors" class="invalid-feedback">
          <div *ngIf="f.base_dias.errors.required">
            Campo requerido
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-sm-12 pr-xl-5">
      <div class="form-group">
        <label for="fecha_operacion">Fecha operación: </label>
        <div class="input-box-container">
          <p>
            <i class="far fa-calendar" aria-hidden="true"></i>
          </p>
          <input
            class="input-box form-control"
            placeholder="Seleccione una fecha"
            angular-mydatepicker
            name="fecha_operacion"
            (click)="dp.toggleCalendar()"
            [options]="myDpOptions"
            (dateChanged)="onDateChanged($event)"
            #dp="angular-mydatepicker"
            [ngClass]="{
              'is-invalid': submitted && f.fecha_operacion.errors
            }"
          />
        </div>

        <div
          *ngIf="submitted && f.fecha_operacion.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.fecha_operacion.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="fecha_liquidacion">Fecha liquidación: </label>

        <div class="input-box-container">
          <div>
            <p>
              <i class="far fa-calendar" aria-hidden="true"></i>
            </p>
            <input
              class="input-box form-control"
              placeholder="Seleccione una fecha"
              angular-mydatepicker
              name="fecha_liquidacion"
              (click)="dp1.toggleCalendar()"
              [options]="myDpOptions"
              (dateChanged)="onDateChanged($event)"
              #dp1="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_liquidacion.errors
              }"
            />
          </div>
        </div>

        <div
          *ngIf="submitted && f.fecha_liquidacion.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.fecha_liquidacion.errors.required">
            Campo requerido
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 pr-xl-5">
      <div class="form-group">
        <label for="fecha_rendencion">Fecha redención: </label>

        <div class="input-box-container">
          <div>
            <p>
              <i class="far fa-calendar" aria-hidden="true"></i>
            </p>
            <input
              class="input-box form-control"
              placeholder="Seleccione una fecha"
              angular-mydatepicker
              name="fecha_rendencion"
              (click)="dp2.toggleCalendar()"
              [options]="myDpOptions"
              (dateChanged)="onDateChanged($event)"
              #dp2="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_rendencion.errors
              }"
            />
          </div>
        </div>

        <div
          *ngIf="submitted && f.fecha_rendencion.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.fecha_rendencion.errors.required">
            Campo requerido
          </div>
        </div>
      </div>
    </div>
  </div>

  <br />
  <div class="form-group text-center space-20">
    <button
      class="btn btn-primary center-component margin-right"
      (click)="goToNext(personalForm)"
    >
      Siguiente
    </button>
  </div>

  <!-- [disabled]="!investmentProposalForm.valid"
                    <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
</form>