1

soy nueva en angular y necesito ayuda por favor, quiero editar los atributos de un Libro en especifico de una lista de libros, pero no se me cargan los valores en cada input del formulario, pero si aparece en consola, es decir no asigna los valores a los inputs de mi formulario Estoy utilizando el FormGroup para guardar los datos y quiero hacer lo mismo para editarlos

libroForm.Component

 Miformulario: FormGroup;
 libro:Libro=new Libro();

 ngOnInit() {

  let aux= JSON.parse(sessionStorage.getItem("cuenta"));
   this.Miformulario= this.fb.group({
    isbn:[''],
    titulo:[''],
    stock:[],
    precioUnitario:[],
    descripcion:[''],
    autores:this.fb.array([this.fb.group({nombre:['']})]),
    generos:this.fb.array([this.fb.group({nombre:['']})]),
    editoriales:this.fb.array([this.fb.group({nombre:['']})]),     
    cuenta:aux.idCuenta,     
  });

  this.cargar();

 }

 onSubmit(formValue: any){ 

 const libro= new Libro();

  libro.isbn=formValue.isbn;

   libro.titulo=formValue.titulo;
   libro.stock=formValue.stock;
   libro.precioUnitario=formValue.precioUnitario;
   libro.descripcion=formValue.descripcion;   
   libro.autores=formValue.autores;
   libro.generos=formValue.generos;
   libro.editoriales=formValue.editoriales;
   libro.cuenta.idCuenta=formValue.cuenta;

this.libroservice.uploadImg(this.imagen,libro.isbn).subscribe(
  data=>{
    this.spinner.hide();
    this.libroservice.createLi(libro).subscribe
      (resp=>this.router.navigate(['/lista']));
    //this.router.navigate(['/lista']);
  },
  err=>{
    this.spinner.hide();
    Swal.fire('Alerta',`Imagen No subida`, 'warning' );
    this.reset();
  }
);
}

cargar():void{

   this.activatedRoute.params.subscribe(
     b=>{
      let id = b['id'];
      if(id){
       this.libroservice.get(id).subscribe(
         (ac=>{this.libro=ac;console.log(ac)}));
      }})
     }

               get getnombreautor(){
                 return this.Miformulario.get('autores') as 
               FormArray;
                    }

      addnombreAutor(){
          const control= 
      <FormArray>this.Miformulario.controls['autores'];
         control.push(this.fb.group({nombre:[]}));
       }

        removeAutor(index:number){
          const control= 
          <FormArray>this.Miformulario.controls['autores'];
             control.removeAt(index);
         }

SERVICE

   createLi(libros:Libro):Observable<Libro>{
     return this.http.post<Libro>(this.url,libros)
   }

 get(isbn:string):Observable<Libro>{
     return this.http.get<Libro>(this.url+'/id/'+isbn);
  }

HTML

           <form   class="col-8"[formGroup]="Miformulario" 
            (ngSubmit)="onSubmit(Miformulario.value)"  novalidate 
                       enctype="multipart/form-data">
        
                   <div class="mb-3">
                         <label for="stock" class="form-label">Stock</label>
                         <input type="number" class="form-control"  id="stock" 
                     formControlName="stock">
                  </div> 
              <div class="mb-3">
                  <label for="precioUnitario" class="form-label">Precio Unitario</label>
                   <input type="number" class="form-control"  id="precioUnitario" 
                    formControlName="precioUnitario" >
              </div>
             
          
              <div class="mb-3">
                <label for="autor" class="form-label">Genero(s)</label>
                <div formArrayName="generos">
                    <div *ngFor="let item of getGeneros.controls; let pointIndex=index" 
                   [formGroupName]="pointIndex">
                      <input formControlName="nombre" type="text" class="form-control" 
              id="nombre"><a class=" boton menos btn btn-link" (click)="removeGenero(pointIndex)"></a>
                    </div>
                  </div>
                  <a class=" boton mas btn btn-link" (click)="addGenero()"></a>
               </div> 

   </form>

No entiendo por que no funciona en el console.log si se muestra el libro, solamente en los inputs no cargan los datos. el routerlink que abre el formulario para editar segun el Id del libro funciona bien, entonces ya no se que hacer, ayuda por favor

2 respuestas 2

2

Hola Esther puedes probar como primer paso. Donde recuperas la data de libro lo siguiente.

if(id){
       this.libroservice.get(id).subscribe(
         (ac=>{
this.libro = ac;
this.Miformulario.patchValue({
    isbn:[ac.isbn],
    titulo:[ac.titulo],
    stock:[ac.stock],
    precioUnitario:[ac.precioUnitario] // De momento con los campos sencillos
})
console.log(ac)}

));
      }})
 }

Prueba a ver si ahora te rellena los los inputs.

2
  • Muchas gracias por responder, efectivamente me ayudo con estos datos el 28 jul. 2022 a las 23:11
  • y como seria con los campos que son array como autores? el 28 jul. 2022 a las 23:44
0

Esta es la parte compleja, por que me puedo imaginar, autores habrá uno o más. No se si lo tienes en un string guardado en la base de datos.

this.autores = JSON.parse(ac.autores.replace(/false/gi, "\"\""));
this.rellenarFormularios('autores', this.autores );

rellenarFormularios( field, value) {
  let keys: any = [];
  let formdiff = this.Miformulario.get(field) as FormArray;
  
  let formularioGrupo: FormGroup;  
  for (let index = 0; index < value.length; index++) {
    formularioGrupo = new FormGroup({});
    const element = value[index];
    for (const key in element) {
      keys[index] = key;    
     formularioGrupo.addControl(key, new FormControl(element[key]) );

  
  }
 formdiff.push(formularioGrupo); //me faltaba esta línea }

Espero que te sirva, si no fuera así no dudes en preguntar.

3
  • muchas gracias, lo que no entiendo es que utilizando this.Miformulario.patchValue({ isbn:[ac.isbn], titulo:[ac.titulo], stock:[ac.stock], precioUnitario:[ac.precioUnitario], autores:[console.log(ac.autores[0].nombre)] }) autores si se me imprime en consola, pero cuando pongo lo mismo: autores:[ac.autores[0].nombre en esta forma, no se cargan en el input el 30 jul. 2022 a las 17:53
  • los datos vienen desde una base de datos y se pueden aumentar con inputs dinamicos el 30 jul. 2022 a las 17:58
  • Tendría que verlo, por que me imagino que pueden que los datos ya vengan en formato json o en formato stringfy y pasarlo a json. En este caso el método rellenarFormularios serían 3 campos para contemplaren campo nombre a rellenar. el 30 jul. 2022 a las 21:50

Tu Respuesta

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

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