soma-frontend/src/app/components/plants/new-plant/new-plant.component.html

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

<div class="main-content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-12">

        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a [routerLink]="['/']">Dashboard</a></li>
            <li class="breadcrumb-item"><a [routerLink]="['/plants']">Plantas</a></li>
            <li class="breadcrumb-item">Nueva planta</li>
          </ol>
        </nav>
      </div>
    </div>
    <br>
    <div class="row justify-content-center">
      
      <div class="col-8">
        <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 planta - <small class="category">Complete la información básica</small></h4>
            </div>
            <div class="card-body">              
              <div class="align-container">
                <form class="form-auth-small ng-untouched ng-pristine ng-valid" [formGroup]="assetForm" (ngSubmit)="createAsset()" >
                  <div class="form-group">
                    <label for="name">Nombre de la planta: </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">País: </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">Ciudad: </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 class="form-group">
                    <label for="address">Dirección: </label>
                    <input type="text" formControlName="address" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.address.errors }" />
                    <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
                      <div *ngIf="f.address.errors.required">Campo requerido</div>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="distribuidora">Distribuidora: </label>
                    <select class="custom-select" formControlName="distribuidora" [ngClass]="{ 'is-invalid': submitted && f.distribuidora.errors }">
                      <option *ngFor="let item of distributor" [value]="item" >{{item}}</option>
                    </select>
                    <div *ngIf="submitted && f.distribuidora.errors" class="invalid-feedback">
                      <div *ngIf="f.distribuidora.errors.required">Campo requerido</div>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="categoria_tarifaria">Categoría tarifaria: </label>
                    <select class="custom-select" formControlName="categoria_tarifaria" [ngClass]="{ 'is-invalid': submitted && f.categoria_tarifaria.errors }">
                      <option *ngFor="let item of categoria_tarifaria" [value]="item.key" >{{item.value}}</option>
                    </select>
                    <div *ngIf="submitted && f.categoria_tarifaria.errors" class="invalid-feedback">
                      <div *ngIf="f.categoria_tarifaria.errors.required">Campo requerido</div>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="cod_tarifa">Código de tarifa: </label>
                    <select class="custom-select" formControlName="cod_tarifa" [ngClass]="{ 'is-invalid': submitted && f.cod_tarifa.errors }">
                      <option *ngFor="let item of codigo_tarifa" [value]="item.key" >{{item.value}}</option>
                    </select>
                    <div *ngIf="submitted && f.cod_tarifa.errors" class="invalid-feedback">
                      <div *ngIf="f.cod_tarifa.errors.required">Campo requerido</div>
                    </div>
                  </div>

                  <br>
                  <button class="btn btn-primary">
                    Crear planta
                  </button>
                  <!--<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>          
  </div>
</div>