frontend-inversiones/src/app/components/investment-proposals/complement-info/complement-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">Nueva</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <inv-proposal-navbar
            [activeLink]="'other_info'"
            [investmentID]="investmentProposalID"
          ></inv-proposal-navbar>

          <div class="card borderless card-wrapper">
            <div class="card-header card-header-icon card-header-rose">
              <h4 class="card-title">
                Información adicional
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <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-3">
                      <div class="form-group">
                        <label for="tipo_mercado">Tipo de mercado: </label>
                        <select
                          class="custom-select"
                          formControlName="tipo_mercado"
                          [ngClass]="{
                            'is-invalid': submitted && f.tipo_mercado.errors
                          }"
                        >
                          <option
                            *ngFor="let item of markets"
                            [value]="item.id_tipo_mercado"
                            [selected]="
                              item.id_tipo_mercado ==
                              complementInfo.tipo_mercado
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.tipo_mercado.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.tipo_mercado.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="emisores">Emisores: </label>

                        <ng-select
                          #emisorSelect
                          [options]="emitters"
                          formControlName="emisores"
                          [ngClass]="{
                            'is-invalid': submitted && f.emisores.errors
                          }"
                        >
                        </ng-select>
                        <div
                          *ngIf="submitted && f.emisores.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.emisores.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="empresa">Empresa: </label>

                        <ng-container
                          *ngIf="
                            investmentProposalID == undefined;
                            else elseTemplate
                          "
                        >
                          <select
                            s
                            class="custom-select"
                            formControlName="empresa"
                            [ngClass]="{
                              'is-invalid': submitted && f.empresa.errors
                            }"
                          >
                            <option
                              *ngFor="let item of companies"
                              [value]="item.id_empresa"
                              [selected]="
                                item.id_empresa == complementInfo.empresa
                              "
                            >
                              {{ item.nombre }}</option
                            >
                          </select>
                        </ng-container>
                        <ng-template #elseTemplate>
                          <input
                            type="text"
                            [value]="companyValue"
                            name="x"
                            class="form-control"
                            readonly
                          />
                          <input
                            type="hidden"
                            formControlName="empresa"
                            class="form-control"
                            readonly
                          />
                        </ng-template>

                        <div
                          *ngIf="submitted && f.empresa.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.empresa.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="pais">País: </label>

                        <select
                          class="custom-select"
                          formControlName="pais"
                          [ngClass]="{
                            'is-invalid': submitted && f.pais.errors
                          }"
                        >
                          <option
                            *ngFor="let item of countries"
                            [value]="item.id_pais"
                            [selected]="item.id_pais == complementInfo.pais"
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.pais.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.pais.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="plazo">Plazos: </label>

                        <select
                          class="custom-select"
                          formControlName="plazo"
                          [ngClass]="{
                            'is-invalid': submitted && f.plazo.errors
                          }"
                        >
                          <option
                            *ngFor="let item of payment_terms"
                            [value]="item.id_plazo"
                            [selected]="item.id_plazo == complementInfo.plazo"
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.plazo.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.pais.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="operaciones">Tipo de operación: </label>

                        <select
                          class="custom-select"
                          formControlName="operaciones"
                          [ngClass]="{
                            'is-invalid': submitted && f.operaciones.errors
                          }"
                        >
                          <option
                            *ngFor="let item of operations"
                            [value]="item.id_tipo_operacion"
                            [selected]="
                              item.id_tipo_operacion ==
                              complementInfo.operaciones
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.operaciones.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.operaciones.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="fecha_inicio_vigencia"
                          >Fecha inicio vigencia:
                        </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
                            formControlName="fecha_inicio_vigencia"
                            (click)="dp.toggleCalendar()"
                            [options]="myDpOptions"
                            #dp="angular-mydatepicker"
                            [ngClass]="{
                              'is-invalid':
                                submitted && f.fecha_inicio_vigencia.errors
                            }"
                          />
                        </div>

                        <div
                          *ngIf="submitted && f.fecha_inicio_vigencia.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.fecha_inicio_vigencia.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="calificadora_riesgo"
                          >Calificadora de riesgo:
                        </label>

                        <select
                          class="custom-select"
                          formControlName="calificadora_riesgo"
                          [ngClass]="{
                            'is-invalid':
                              submitted && f.calificadora_riesgo.errors
                          }"
                        >
                          <option
                            *ngFor="let item of rate_agencies"
                            [value]="item.codigo"
                            [selected]="
                              item.codigo == complementInfo.calificadora_riesgo
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.calificadora_riesgo.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.calificadora_riesgo.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="calificacion"
                          >Calificación de riesgo:
                        </label>

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

                  <div class="row">
                    <div class="col-lg-6 col-sm-12 pr-xl-3">
                      <div class="form-group">
                        <label for="comentarios">Comentarios: </label>

                        <textarea
                          rows="2"
                          class="form-control"
                          formControlName="comentarios"
                        ></textarea>
                        <div
                          *ngIf="submitted && f.comentarios.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.comentarios.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="justificacion">Justificación: </label>

                        <textarea
                          rows="2"
                          class="form-control"
                          formControlName="justificacion"
                        ></textarea>
                        <div
                          *ngIf="submitted && f.justificacion.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.justificacion.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>
                    <div #testOutlet></div>
                  </div>
                  <br />
                  <div class="form-group text-center space-20">
                    <button
                      type="button"
                      class="btn btn-default center-component margin-right"
                      (click)="goToPrevious()"
                    >
                      Anterior
                    </button>
                    <button
                      type="submit"
                      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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>