0

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 introducir la descripción de la imagen aquí

<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 introducir la descripción de la imagen aquí Se ve solo esto introducir la descripción de la imagen aquí

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;
 }

1 respuesta 1

2

Puedes obtener el id desde la ruta, agrega esto a tu constructor: private activeRoute: ActivatedRoute y en el ngOnInit haces esto:

ngOnInit(): void {
 var id = this.activeRoute.snapshot.paramMap.get('id');
 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,
          })
        }) 
}

Otra forma de obtener el id de la ruta es:

constructor(private activeRoute: ActivatedRoute){
 this.id = activeRoute.params
        .pipe(pluck('id'));
}
7
  • Perdón no había notado que copie el código con un error, ahí lo volví a editar y ese no es el inconveniente dado q ese id si trae el valor correspondiente
    – Germanccho
    Commented el 17 sept. 2022 a las 17:20
  • Edité la repuesta, léela de nuevo y verifica si te pueda ayudar. Commented el 17 sept. 2022 a las 17:22
  • Otra cosa donde seteas el objeto datosUsuarios? Commented el 17 sept. 2022 a las 17:24
  • Puedes agregar una imagen? Commented el 17 sept. 2022 a las 17:30
  • Ahí agregue mas información a la consulta.
    – Germanccho
    Commented el 17 sept. 2022 a las 17:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.