BONOS FORM
<h4 class="card-title">
  BONO
</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="ytm_vencimiento">YTM al vencimiento: </label>
        <input
          type="text"
          formControlName="ytm_vencimiento"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.ytm_vencimiento.errors
          }"
        />
        <div
          *ngIf="submitted && f.ytm_vencimiento.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.ytm_vencimiento.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="precio_c_v">Precio Compra/Venta: </label>
        <input
          type="text"
          formControlName="precio_c_v"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.precio_c_v.errors
          }"
        />
        <div *ngIf="submitted && f.precio_c_v.errors" class="invalid-feedback">
          <div *ngIf="f.precio_c_v.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="precio_vencimiento">Precio al vencimiento: </label>
        <input
          type="text"
          formControlName="precio_vencimiento"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.precio_vencimiento.errors
          }"
        />
        <div
          *ngIf="submitted && f.precio_vencimiento.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.precio_vencimiento.errors.required">
            Campo requerido
          </div>
        </div>
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-lg-6 col-sm-12 pr-xl-5">
      <div class="form-group">
        <label for="fecha_liquidacion">Fecha Liquidació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_liquidacion"
            (click)="dp.toggleCalendar()"
            [options]="myDpOptions"
            (dateChanged)="onDateChanged($event)"
            #dp="angular-mydatepicker"
            [ngClass]="{
              'is-invalid': submitted && f.fecha_liquidacion.errors
            }"
          />
        </div>

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

      <div class="form-group">
        <label for="fecha_vencimiento">Fecha Vencimiento: </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_vencimiento"
              (click)="dp1.toggleCalendar()"
              [options]="myDpOptions"
              (dateChanged)="onDateChanged($event)"
              #dp1="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_vencimiento.errors
              }"
            />
          </div>
        </div>

        <div
          *ngIf="submitted && f.fecha_vencimiento.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.fecha_vencimiento.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_cupon">Última Fecha Cupó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_cupon"
              (click)="dp2.toggleCalendar()"
              [options]="myDpOptions"
              (dateChanged)="onDateChanged($event)"
              #dp2="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_cupon.errors
              }"
            />
          </div>
        </div>

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

  <!---->

  <!---->

  <br />

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

      <div class="form-group">
        <label for="comision_bolsa">Comisión Bolsa: </label>
        <input
          type="text"
          formControlName="comision_bolsa"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.comision_bolsa.errors
          }"
        />
        <div
          *ngIf="submitted && f.comision_bolsa.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.comision_bolsa.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="cupon">Cupón: </label>
        <input
          type="text"
          formControlName="cupon"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.cupon.errors
          }"
        />
        <div *ngIf="submitted && f.cupon.errors" class="invalid-feedback">
          <div *ngIf="f.cupon.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="costos_transferencia">Costos de Transferencia: </label>
        <input
          type="text"
          formControlName="costos_transferencia"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.costos_transferencia.errors
          }"
        />
        <div
          *ngIf="submitted && f.costos_transferencia.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.costos_transferencia.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>