frontend-inversiones/src/app/components/investment-proposals/payment-info/payment-info.component.html

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">
                <a [routerLink]="['/investment-proposals']">
                  Propuestas de inversión
                </a>
              </li>
              <li class="breadcrumb-item">Información de pago</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="card borderless card-wrapper">
          <div class="card-header card-header-icon card-header-rose">
            <br />
            <h4 class="card-title">
              Información de pago para la inversión: {{ inversionCode }}
            </h4>
          </div>
          <div class="card-body">
            <form
              class="form-auth-small ng-untouched ng-pristine ng-valid"
              [formGroup]="investmentProposalForm"
            >
              <div class="row">
                <!-- Valor nominal -->
                <div class="col-lg-6 col-sm-12 pr-xl-3">
                  <div class="form-group">
                    <label for="monto">Monto a pagar: </label>
                    <div class="input-box-container">
                      <p>
                        <i class="fas fa-dollar-sign"></i>
                      </p>
                      <input
                        type="text"
                        formControlName="monto"
                        class="form-control"
                        [ngClass]="{
                          'is-invalid': submitted && f.monto.errors
                        }"
                      />
                      <div
                        *ngIf="submitted && f.monto.errors"
                        class="invalid-feedback"
                      >
                        <div *ngIf="f.monto.errors.required">
                          Campo requerido
                        </div>
                        <div *ngIf="f.monto.errors.pattern">
                          Debe ingresar una cifra válida
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 col-sm-12 pr-xl-3">
                  <div class="form-group">
                    <label for="payment_types">Tipo pago: </label>

                    <select
                      class="custom-select"
                      (change)="onChangePaymentType($event.target.value)"
                      formControlName="tipo_pago"
                      [ngClass]="{
                        'is-invalid': submitted && f.tipo_pago.errors
                      }"
                    >
                      <option value=""></option>

                      <option
                        *ngFor="let item of payment_types"
                        [value]="item.id_tipo_pago"
                      >
                        {{ item.nombre }}</option
                      >
                    </select>
                    <div
                      *ngIf="submitted && f.tipo_pago.errors"
                      class="invalid-feedback"
                    >
                      <div *ngIf="f.tipo_pago.errors.required">
                        Campo requerido
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 col-sm-12 pr-xl-3">
                  <div class="form-group">
                    <label for="cuenta_bancaria">Cuenta bancaria: </label>

                    <select
                      class="custom-select"
                      formControlName="cuenta_bancaria"
                      [ngClass]="{
                        'is-invalid': submitted && f.cuenta_bancaria.errors
                      }"
                    >
                      <option
                        *ngFor="let item of accounts_origin"
                        [value]="item.id_cuenta_bancaria"
                      >
                        {{ item.nombre }}</option
                      >
                    </select>
                    <div
                      *ngIf="submitted && f.cuenta_bancaria.errors"
                      class="invalid-feedback"
                    >
                      <div *ngIf="f.cuenta_bancaria.errors.required">
                        Campo requerido
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 col-sm-12 pr-xl-3">
                  <div class="form-group">
                    <label for="emitir_nombre">Emitir a nombre: </label>
                    <div class="input-box-container">
                      <p>
                        <i class="far fa-envelope"></i>
                      </p>
                      <input
                        type="text"
                        formControlName="emitir_nombre"
                        class="form-control"
                      />
                    </div>
                  </div>
                </div>

                <div
                  class="col-lg-6 col-sm-12 pr-xl-3"
                  *ngIf="payment_transfer"
                >
                  <div class="form-group">
                    <label for="cuenta_bancaria_destino"
                      >Cuenta bancaria destino:
                    </label>

                    <select
                      class="custom-select"
                      formControlName="cuenta_bancaria_destino"
                    >
                      <option
                        *ngFor="let item of accounts_destination"
                        [value]="item.id_cuenta_bancaria"
                      >
                        {{ item.nombre }}</option
                      >
                    </select>
                  </div>
                </div>

                <!-- Fecha vencimiento -->
                <div class="col-lg-6 col-sm-12 pr-xl-3">
                  <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
                          formControlName="fecha_vencimiento"
                          (click)="dp2.toggleCalendar()"
                          [options]="myDpOptions"
                          #dp2="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-12 col-sm-12 pr-xl-12">
                  <div class="form-group text-right">
                    <br />
                    <button
                      class="btn btn-primary center-component"
                      type="submit"
                      (click)="sendPaymentInfo(investmentProposalForm)"
                    >
                      Enviar información de pago
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>