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

<h4 class="card-title">
  ACCIONES PREFERENTES NACIONALES
</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="precio_limpio">Precio Limpio: </label>
        <input
          type="text"
          formControlName="precio_limpio"
          class="form-control"
          [ngClass]="{
            'is-invalid': submitted && f.precio_limpio.errors
          }"
        />
        <div
          *ngIf="submitted && f.precio_limpio.errors"
          class="invalid-feedback"
        >
          <div *ngIf="f.precio_limpio.errors.required">
            Campo requerido
          </div>
        </div>
      </div>

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

  <!---->

  <!---->

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

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