tengo un problema con ngModel en los input de mi formulario y no sé como resolverlo.
Tengo una API con php que me devuelve valores en este formato.
[
{
"idPotencial": 1,
"Nombre": "ssssss",
"Apellidos": "ssssss",
"Fecha": "2021-06-22 00:00:00",
"Observaciones": "FFFFFFFFFFFFFFF"
}]
En angular tengo un servicio que llama a la api y lo castea a una interface como modelo.
export interface IPotenciales{
idPotencial: any
Nombre: string
Apellidos: String
Fecha: Date
Observaciones: string
}
y la llamada la hago tal que así
getPotencialesById(idPotencial : any) : Observable<IPotenciales> {
return this.http.get<IPotenciales>(url)
}
Pues bien, el problema que tengo es que al usar ngModel en el formulario no me muestra nada. En el HTML he colocado esto para ver si me trae los datos.
{{ this.contactoPotencial }}
y
{{ this.contactoPotencial | json }}
En la primera salida me saca el siguiente resultado
[object Object]
y en la segunda así
[ { "idPotencial": 1, "Nombre": "Gemma", "Apellidos": "Tendero Ozores", "Fecha": "2021-06-22 00:00:00", "Observaciones": "FFFFFFFFFFFFFFF" } ]
Pongo el código del componente para ver como lo cargo.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { IPotenciales } from 'src/app/models/IPotenciales';
import { PotencialesService } from 'src/app/servicios/potenciales.service';
@Component({
selector: 'app-edit-contact',
templateUrl: './edit-contact.component.html',
styleUrls: ['./edit-contact.component.scss']
})
export class EditContactComponent implements OnInit {
contactoPotencial : IPotenciales = { } as IPotenciales
idPotencial : any
constructor( private fb: FormBuilder,
private servicio : PotencialesService,
private activatedRoute : ActivatedRoute) { }
ngOnInit(): Promise<void> {
this.activatedRoute.params.subscribe( ({ id })=>{
this.idPotencial = id
})
this.getPotencial()
}
getPotencial(){
this.servicio.getPotencialesById(this.idPotencial).subscribe( data =>{
this.contactoPotencial = data
})
}}
EDITO:
Se me olvido poner el codigo del formulario
{{ this.contactoPotencial | json }}
<form class="form-horizontal floating-labels" role="form" #myForm="ngForm">
<div class="form-body">
<h3 class="box-title">Datos del contacto</h3>
<hr class="m-t-0 m-b-40">
<div class="row my-2">
<div class="col-md">
<div class="form-floating m-b-40">
<input type="date" class="form-control" id="Fecha"
placeholder="Seleccione una fecha">
<label for="Fecha">Fecha</label>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-floating">
<input type="text" class="form-control" id="Origen" name="Origen" placeholder="Origen">
<span class="bar"></span>
<label for="Origen">Origen</label>
</div>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6">
<div class="form-group">
<div class="form-floating">
<input type="text" id="Nombre" placeholder="Nombre"
class="form-control" name="Nombre"
[(ngModel)]="this.contactoPotencial.Nombre">
<span class="bar"></span>
<label for="Nombre">Nombre</label>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<div class="form-floating">
<input type="text" id="Apellidos" placeholder="Apellidos"
class="form-control" name="Apellidos"
[(ngModel)]="this.contactoPotencial.Apellidos">
<span class="bar"></span>
<label for="Apellidos">Apellidos</label>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row my-2">
<div class="col-md">
<div class="form-group">
<div class="form-floating">
<input type="text" class="form-control"
name="ObjetivoConsulta"
id="ObjetivoConsulta" placeholder="Objetivo">
<span class="bar"></span>
<label for="ObjetivoConsilta">¿Cual es tu objetivo de consulta?</label>
</div>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md">
<div class="form-group">
<div class="form-floating">
<input type="number" class="form-control" placeholder="Intentos Anteriores"
name="IntentosAnteriores"
id="IntentosAnteriores">
<span class="bar"></span>
<label for="IntentosAnteriores">¿Intentos anteriores?</label>
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Selecciona uno</option>
<option value="1">Si</option>
<option value="0">No</option>
</select>
<span class="bar"></span>
<label for="IntentosAnteriores">¿Lo ha conseguido?</label>
</div>
</div>
</div>
<div class="col-md">
<div class="form-froup">
<div class="form-floating">
<input type="text"
class="form-control"
id="QueNoFunciono"
name="QueNoFunciono"
placeholder="¿Que no ha funcionado?">
<span class="bar"></span>
<label for="QueNoFunciono">¿Que no ha funcioando?
</label>
</div>
</div>
</div>
</div>
<!--/row-->
<h3 class="box-title">Observaciones</h3>
<hr class="m-t-0 m-b-40">
<div class="row my-2">
<div class="col-md">
<div class="form-floating">
<textarea class="form-control"
placeholder="Observaciones"
id="Observaciones"
name="Observaciones" style="height: 100px"></textarea>
<label for="Observaciones">Observaciones</label>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn btn-danger"> <i
class="fa fa-pencil"></i> Grabar</button>
<button type="button" class="btn btn-
inverse">Cancelar</button>
</div>
</div>
</div>
<div class="col-md-6"> </div>
</div>
</div>
</form>
Por algún motivo no me esta parseando de forma correcta el JSON de la api a mi modelo en Angular (o eso creo). Espero que me puedan ayudar con esto.
Gracias de antemano. Un saludo.