Angular how to use ngModel correctly? Why I get undefined and errors? [duplicate]

Question

I'm having some issues with this code, Angular logs "undefined" when I use the input field, its a basic component, but can't make it work.

HTML template:

<h1>{{ titulo }}</h1>
<ul>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
</ul>

Nombre del parque:

<input type="text" [(ngModel)]="nombreDelParque" (keyup)="mostrarNombre()" />

// this is not binding --> 

Resultado {{ nombreDelParque }}

<br />

<parques></parques>

TS file:

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'tienda',
  templateUrl: './tienda.component.html',
  styleUrls: ['./tienda.component.css'],
})
export class TiendaComponent {
  public titulo: string;
  public nombreDelParque: string;
 
  constructor() {
    this.titulo = 'esta es la tienda';
  }
 
  mostrarNombre() {
    console.log(this.nombreDelParque);
  }
}

Error message in chrome's browser console and when using the input field I get logged undefined on the console.

Error: src/app/components/tienda/tienda.component.html:18:20 - error NG8002:  
 Can't bind to 'ngModel' since it isn't a known property of 'input'.
        
18 <input type="text" [(ngModel)]="nombreDelParque" (keyup)="mostrarNombre()" />
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
src/app/components/tienda/tienda.component.ts:5:16
5   templateUrl: './tienda.component.html',
                             ~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TiendaComponent.

Works fine for me. Make sure you have imported FormsModule as per the above comment. — Nicholas K
– Nicholas K, Commented Nov 27, 2020 at 14:12

O_o · Accepted Answer · 2020-11-27 14:16:00Z

1

You have to import FormsModule in app.module.ts to use ngModal. Also if you are using formbuilder you'll need ReactiveFormsModule for that. Don't forget to add these modules to import list.
Here is how your app.module.ts should look:

// your modules
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // your modules
    FormsModule,
    ReactiveFormsModule
  ], 
  declarations: []
  }
)

answered Nov 27, 2020 at 14:16

O_o

9133 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yala Yala Herzlin Over a year ago

it was that. thanks!

Collectives™ on Stack Overflow

Angular how to use ngModel correctly? Why I get undefined and errors? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related