Hola tengo el siguiente comportamiento y no se como resolverlo tengo 2 componentes un user
y un editar-usuario
. En el primer componente tengo la siguiente tabla
<div *ngIf="!crearEditar" class="container">
<mat-toolbar>
<span>Usuarios</span>
<div class="example-spacer"></div>
<button mat-raised-button color="primary" (click)="crearEditar = !crearEditar" routerLink="/dashboard/editar-usuario">Agregar</button>
</mat-toolbar>
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<div>
<div *ngIf="!loading">
<mat-form-field appearance="standard">
<mat-label>Filtrar Usuarios</mat-label>
<input matInput (keyup)="applyFilter($event)" #input autocomplete="off">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="usuario">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Usuario </th>
<td mat-cell *matCellDef="let element"> {{element.usuario}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
<td mat-cell *matCellDef="let element"> {{element.nombre}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="apellido">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Apellido </th>
<td mat-cell *matCellDef="let element"> {{element.apellido}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dni">
<th mat-header-cell *matHeaderCellDef> DNI </th>
<td mat-cell *matCellDef="let element"> {{element.dni}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="acciones">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element; let i = index" style="text-align:right;">
<a class="pointer" style="color:#1878b0" matTooltip="Ver Usuario"><mat-icon>search</mat-icon></a>
<a class="pointer" style="color:#0aac2d" matTooltip="Editar Usuario" routerLink="/dashboard/editar-usuario" (click)="editarUsuario(element.idUsuario)"><mat-icon>edit</mat-icon></a>
<a class="pointer" style="color:#cf1c1c" matTooltip="Eliminar Usuario" (click)="eliminarUsuario(element.idUsuario)"><mat-icon>delete</mat-icon></a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
</div>
</div>
</div>
</div>
Y en el segundo componente tengo el siguiente formulario
<div class="container">
<mat-toolbar>
<span>Crear Usuario</span>
</mat-toolbar>
<mat-spinner *ngIf="loading" diameter="50" class="spinner"></mat-spinner>
<form [formGroup]="form" >
<mat-grid-list cols="10" rowHeight="60px">
<mat-grid-tile [colspan]="6" [rowspan]="1">
<label class="margen-label">Usuario</label>
<input type="text" class="form-control ancho" formControlName="usuario" id="usuario">
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4">
<img src="../../../../assets/images/icon-alta-usuario.png" width="150" height="150"alt="">
</mat-grid-tile>
<mat-grid-tile [colspan]="6" [rowspan]="1">
<label class="margen-label">Nombre</label>
<input type="text" class="form-control ancho" formControlName="nombre" id="nombre">
</mat-grid-tile>
<mat-grid-tile [colspan]="6" [rowspan]="1">
<label class="margen-label">Apellido</label>
<input type="text" class="form-control ancho" formControlName="apellido" id="apellido">
</mat-grid-tile>
<mat-grid-tile [colspan]="6" [rowspan]="1">
<label class="margen-label">DNI</label>
<input type="text" class="form-control margen-text-input-dni" formControlName="dni" id="dni">
</mat-grid-tile>
</mat-grid-list>
</form>
<br>
<div class="row" *ngIf="!loading">
<div class="form-group pl-3">
<button class="btn btn-primary" (click)="updateUsuarios($event)" [disabled]="form.invalid" routerLink="/dashboard/users">Agregar</button>
</div>
<div class="form-group pl-3">
<button type="button" class="btn btn-danger" routerLink="/dashboard/users">Cancelar</button>
</div>
</div>
</div>
Formulario que se muestra tanto ingresando por el botón Agregar por medio de un routerLink
, como también utilizando el botón Editar de cada uno de los items
.
Al presionar el botón editar se ejecuta un método que se encuentra en el user.component
editarUsuario(id: number) {
this.route.editarUsuarios(id);
}
al cual le paso el id del del item
. Este método llama a otro método que se encuentra en el segundo componente dentro del editar-usuario.component
editUsuarios(id: number) {
this._usuarioService.getUsuario(id).subscribe(data =>{
this.form.setValue({
'usuario': this.datosUsuario.usuario,
'nombre': this.datosUsuario.nombre,
'apellido': this.datosUsuario.apellido,
'dni': this.datosUsuario.dni,
})
}
al cual hasta ahí le llega el valor del id del item
. Y acá es donde se me comienza a complicar la situación, dado que no logro dentro de este método encontrar la forma de setearle los valores del user
al formulario. Cosa que si logro desde el método ngOnInit
harcodeandole el valor (18) de id
ya que si intento utilizar el mismo id
obtenido en el user
me lo toma como undefined
. Este es el código utilizado para setearle los valores al formulario desde el ngOnInit
.
ngOnInit(): void {
this._usuarioService.getUsuario(18).subscribe(data =>{
this.form.setValue({
'usuario': this.datosUsuario.usuario,
'nombre': this.datosUsuario.nombre,
'apellido': this.datosUsuario.apellido,
'dni': this.datosUsuario.dni,
})
})
}
La pregunta sería como puedo hacer para que al método ngOnInit
le llegue ese id
(sin utilizar @input
que tampoco me funciona) o como puedo hacer que desde el método editUsuarios
se complete el formulario
.
El formulario se encuentra definido en el editar-usuario.component
de la siguiente forma.
form = new FormGroup({
usuario: new FormControl('', Validators.required),
nombre: new FormControl('', Validators.required),
apellido: new FormControl('', Validators.required),
dni: new FormControl('', Validators.required),
});
Si utilizo el var id = this.activeRoute.snapshot.paramMap.get('id');
me trae los datos correctamente pero me muestra el editar-usuario.html
por fuera de mi dashboar
.
En vez de ver de esta forma
Se ve solo esto
El Objeto
datosUsuarios
se setea en el editar-usuario.component como datosUsuario: Usuario;
donde el Usuario
esta definido como un Model
export class Usuario {
usuario: String;
dni: number;
nombre: string;
apellido: string;
}