frontend-inversiones/src/app/components/investment-proposals/new-investment-proposal/new-investment-proposal.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">
          <div class="card">
            <div class="card-header card-header-icon card-header-rose">
              <div class="card-icon"><i class="material-icons">map</i></div>
              <h4 class="card-title">
                Nueva propuesta de inversión -
                <small class="category">Complete la información</small>
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <form
                  class="form-auth-small ng-untouched ng-pristine ng-valid"
                  [formGroup]="investmentProposalForm"
                  (ngSubmit)="createOrganization()"
                >
                  <div class="row">
                    <div class="col-xl-4 col-lg-6 col-sm-12 pr-xl-5">
                      <div class="form-group">
                        <label for="name">Asunto: </label>
                        <input
                          type="text"
                          formControlName="name"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.name.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.name.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.name.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="country">Monto inversión: </label>
                        <input
                          type="text"
                          formControlName="country"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.country.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.country.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.country.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="city">Ingresos esperados: </label>
                        <input
                          type="text"
                          formControlName="city"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.city.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.city.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.city.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-sm-12 pr-xl-5">
                      <div class="form-group">
                        <label for="contactName">Precio: </label>
                        <input
                          type="text"
                          formControlName="contactName"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.contactName.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.contactName.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.contactName.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="contactNumber">Nombre: </label>
                        <input
                          type="text"
                          formControlName="contactNumber"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.contactNumber.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.contactNumber.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.contactNumber.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="name">Rendimiento: </label>
                        <input
                          type="text"
                          formControlName="name"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.name.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.name.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.name.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-sm-12">
                      <div class="form-group">
                        <label for="country">Fecha: </label>
                        <input
                          type="text"
                          formControlName="country"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.country.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.country.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.country.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="city">Plazo: </label>
                        <input
                          type="text"
                          formControlName="city"
                          class="form-control"
                          [ngClass]="{
                            'is-invalid': submitted && f.city.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.city.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.city.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br />
                  <button class="btn btn-primary">
                    Guardar propuesta de inversión
                  </button>
                  <!--<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>