soma-frontend/src/app/components/users/new-user/new-user.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]="['/users']">Usuarios</a></li>
            <li class="breadcrumb-item">Nuevo Usuario</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">person_add</i></div>
              <h4 class="card-title">Nuevo Usuario - <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]="userForm" (ngSubmit)="createUser()">
                  <div class="form-group">
                    <label for="first_name">Nombre: </label>
                    <input type="text" formControlName="first_name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }"/>
                    <div *ngIf="submitted && f.first_name.errors" class="invalid-feedback">
                      <div *ngIf="f.first_name.errors.required">Campo requerido</div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="last_name">Apellido: </label>
                    <input type="text" formControlName="last_name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.last_name.errors }"/>
                    <div *ngIf="submitted && f.last_name.errors" class="invalid-feedback">
                      <div *ngIf="f.last_name.errors.required">Campo requerido</div>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="email">Email: </label>
                    <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }"/>
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                      <div *ngIf="f.email.errors.required">Campo requerido</div>
                    </div>
                  </div>      
                  
                  <div class="form-group">
                    <label for="role">Rol: </label>
                    <br>
                    
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" formControlName="role" id="roleRadios1" value="0" 
                      [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
                      <label class="form-check-label" for="roleRadios1">
                        Invitado
                      </label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" formControlName="role" id="roleRadios2" value="1" 
                      [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
                      <label class="form-check-label" for="roleRadios2">
                        Usuario
                      </label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" formControlName="role" id="roleRadios3" value="2" 
                      [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
                      <label class="form-check-label" for="roleRadios3">
                        Administrador
                      </label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" formControlName="role" id="roleRadios4" value="3" 
                      [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
                      <label class="form-check-label" for="roleRadios4">
                        Super Admin
                      </label>
                    </div>
                  </div>

                  <div class="form-group" *ngIf="!isLoadingOrganization; else loadingTmpl">
                    <label>Organizaciones:</label>
                    <div *ngFor="let item of listOrganization; let i = index" class="checkbox">
                      <label>
                        <input type="checkbox" [formControl]="organizationsFormGroup?.controls[item.id]" /> {{ item.name }}
                      </label>
                    </div>    
                  </div>
                  
                  <br>
                  <button class="btn btn-primary">
                    Crear usuario
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>


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


<ng-template #loadingTmpl>
  <div>Cargando...</div>
</ng-template>