1. <mat-toolbar color="primary">{{ tituloVista }} Rol</mat-toolbar>
2. <mat-card>
3.   <form #editForm="ngForm" [formGroup]="formAdd" (ngSubmit)="saveRol()">
4.     <mat-card-content>
5.       <div
6.         class="form-control-container"
7.         fxLayout="row"
8.         fxLayoutGap="5%"
9.         fxLayout.xs="column"
10.       >
11.         <mat-form-field fxFlex="33%">
12.           <mat-label>Sub Sistema</mat-label>
13.           <mat-select
14.             name="subsistemaId"
15.             formControlName="subSistema"
16.             required
17.             (selectionChange)="changeSubsistema($event.value)"
18.           >
19.             <mat-option>Ninguno</mat-option>
20.             <mat-option
21.               *ngFor="let subsistema of subsistemas"
22.               [value]="subsistema.subsistemaId"
23.               matTooltip="{{ subsistema.nombre }}"
24.               >{{ subsistema.nombre }}</mat-option
25.             >
26.           </mat-select>
27.           <mat-error>
28.             <span *ngIf="formAdd?.controls.subSistema?.errors?.required"
29.               >El campo es requerido</span
30.             >
31.           </mat-error>
32.         </mat-form-field>
33.         <mat-form-field fxFlex="33%">
34.           <mat-label>Aplicación</mat-label>
35.           <mat-select
36.             formControlName="aplicacion"
37.             (selectionChange)="changeAplicacion($event.value)"
38.           >
39.             <mat-option>Ninguno</mat-option>
40.             <mat-option
41.               *ngFor="let aplicacion of aplicaciones"
42.               [value]="aplicacion.aplicacionId"
43.               matTooltip="{{ aplicacion.nombre }}"
44.               >{{ aplicacion.nombre }}</mat-option
45.             >
46.           </mat-select>
47.           <mat-error>
48.             <span *ngIf="formAdd?.controls.aplicacion?.errors?.required"
49.               >El campo es requerido</span
50.             >
51.           </mat-error>
52.         </mat-form-field>
53.         <mat-form-field fxFlex="30%">
54.           <mat-label>Opción</mat-label>
55.           <mat-select name="opcionId" formControlName="opcion" required>
56.             <mat-option>Ninguno</mat-option>
57.  
58.             <mat-option
59.               *ngFor="let opcion of opciones"
60.               [value]="opcion.opcionId"
61.               >{{ opcion.nombre }}</mat-option
62.             >
63.           </mat-select>
64.           <mat-error>
65.             <span *ngIf="formAdd?.controls.opcion?.errors?.required"
66.               >El campo es requerido</span
67.             >
68.           </mat-error>
69.         </mat-form-field>
70.       </div>
71.       <div
72.         class="form-control-container"
73.         fxLayout="row"
74.         fxLayoutGap="5%"
75.         fxLayout.xs="column"
76.       >
77.         <mat-form-field fxFlex="30%">
78.           <mat-label>Tipo Aplicación</mat-label>
79.           <mat-select
80.             name="tipoAplicacionId"
81.             formControlName="tipoAplicacion"
82.             required
83.           >
84.             <mat-option>Ninguno</mat-option>
85.             <mat-option
86.               *ngFor="let tipoAplicacion of tipoAplicaciones"
87.               [value]="tipoAplicacion.clasificadorId"
88.               >{{ tipoAplicacion.descripcion }}</mat-option
89.             >
90.           </mat-select>
91.           <mat-error>
92.             <span *ngIf="formAdd?.controls.tipoAplicacion?.errors?.required"
93.               >El campo es requerido</span
94.             >
95.           </mat-error>
96.         </mat-form-field>
97.         <mat-form-field fxFlex="30%">
98.           <mat-label>Tipo Rol</mat-label>
99.           <mat-select name="tipoRolId" formControlName="tipoRol" required>
100.             <mat-option>Ninguno</mat-option>
101.             <mat-option
102.               *ngFor="let tipoRol of tipoRoles"
103.               [value]="tipoRol.clasificadorId"
104.               >{{ tipoRol.descripcion }}</mat-option
105.             >
106.           </mat-select>
107.           <mat-error>
108.             <span *ngIf="formAdd?.controls.tipoRol?.errors?.required"
109.               >El campo es requerido</span
110.             >
111.           </mat-error>
112.         </mat-form-field>
113.       </div>
114.       <div
115.         class="form-control-container"
116.         fxLayout="row"
117.         fxLayoutGap="5%"
118.         fxLayout.xs="column"
119.       >
120.         <mat-form-field fxFlex="30%">
121.           <mat-label>Nombre</mat-label>
122.           <input
123.             matInput
124.             type="text"
125.             name="rol"
126.             formControlName="nombre"
127.             required
128.             maxlength="60"
129.             oninput="this.value = this.value.toUpperCase()"
130.           />
131.           <mat-error>
132.             <span *ngIf="formAdd?.controls.nombre?.errors?.required"
133.               >El campo es requerido</span
134.             >
135.             <span *ngIf="formAdd?.controls.nombre?.errors?.minlength"
136.               >Minimo de caracteres es 2</span
137.             >
138.             <span *ngIf="formAdd?.controls.nombre?.errors?.maxlength"
139.               >Maximo de caracteres es 60</span
140.             >
141.           </mat-error>
142.         </mat-form-field>
143.         <mat-form-field fxFlex="70%">
144.           <mat-label>Descripción</mat-label>
145.  
146.           <input
147.             matInput
148.             type="text"
149.             type="text"
150.             name="descripcion"
151.             formControlName="descripcion"
152.             required
153.             maxlength="150"
154.             oninput="this.value = this.value.toUpperCase()"
155.           />
156.           <mat-error>
157.             <span *ngIf="formAdd?.controls.descripcion?.errors?.required"
158.               >El campo es requerido</span
159.             >
160.             <span *ngIf="formAdd?.controls.descripcion?.errors?.minlength"
161.               >Minimo de caracteres es 2</span
162.             >
163.             <span *ngIf="formAdd?.controls.descripcion?.errors?.maxlength"
164.               >Maximo de caracteres es 150</span
165.             >
166.           </mat-error>
167.         </mat-form-field>
168.       </div>
169.     </mat-card-content>
170.     <mat-card-actions fxLayout="row" fxLayoutAlign="end center">
171.       <button
172.         type="submit"
173.         mat-raised-button
174.         color="primary"
175.         [disabled]="!editForm.form.valid"
176.       >
177.         Guardar
178.         <mat-icon class="white">save</mat-icon>
179.       </button>
180.       <button
181.         type="button"
182.         mat-raised-button
183.         color="warn"
184.         (click)="closeDialog()"
185.       >
186.         Cerrar
187.         <mat-icon class="white">cancel</mat-icon>
188.       </button>
189.     </mat-card-actions>
190.   </form>
191. </mat-card>
192.