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