0

EL ngModel "[(ngModel)]="usuario.nombre" no me lee los Objetos de usuario y no se por que sera Porfa ayudenme

En pag.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styles: [`
    .ng-invalid.ng-touched:not(form){
      border: 1px solid red;
    }
  `]
})
export class TemplateComponent {

      usuario:Object= {
      nombre :"Felipe",
      apellido :"",
      correo : "",
      
    }

  

  constructor() { }

  guardar( forma:NgForm ){

    console.log('Formulario disparado');
    console.log("ngForm",forma);
    console.log("Valor",forma.value);

    console.log("Usuario: ", this.usuario);

  }

}

En pag.html

 <form (ngSubmit)="guardar(forma)" #forma="ngForm" novalidate>

 <div class="form-group row">

            <label class="col-2 col-form-label">Nombre</label>
            <div class="col-8">

                <input #n="ngModel" class="form-control" name="nombre" 
                 [(ngModel)]="usuario.nombre" required type="text" placeholder="Nombre" minlength="5">

              
            </div>
        </div>

</form>
               
3
  • te marca algún error, y en que parte defines tu objeto, dentro de el ts Commented el 29 abr. 2021 a las 19:10
  • Ya corregí la pregunta y le agregue todo el ts mira me sale un error en el html en el ngModel [(ngModel)]="usuario.nombre" ahí me sale el error ya que me sale subrayado y me dice que nombre no existe en el objeto usuario que estaré haciendo mal? @EduardoJaramilloLicea
    – Felipe
    Commented el 29 abr. 2021 a las 19:22
  • Si me funcio asi de esa forma Gracias. Por que toca asi crear un documento usuario ts con la interface ahi
    – Felipe
    Commented el 29 abr. 2021 a las 22:55

1 respuesta 1

0

Tu error es generado por tu tipo, defines a tu variable usuario como tipo Object, y en tu html asignas la propiedad nombre de tu objeto usuario, el cual en su definición no contiene un parámetro nombre.

Tienes dos posibles Soluciones, la primera quita el tipo Object a tu variable usuario, con lo que el angular te lo detectara como un objeto con las propiedades que le definas al inicio.

public usuario = { nombre: 'Felipe', apellido: 'Cruz', correo: ''}

Y la segunda Opción y la que mas te recomendaría, es generar una clase o interface donde defines tus propiedades y las asignas a tu variable, y así tu variable esta tipeada y tiene sus propiedades definidas.

archivo Usuario.ts

export interface Usuario {
  nombre: string;
  apellido: string;
  correo: string;
}

Archivo Component.ts

public usuario: Usuario = {
    nombre: '',
    apellido: '',
    correo: ''
  }

introducir la descripción de la imagen aquí

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.