Angular 15.2.7 Error: Can't bind to 'ndModel' since it isn't a known property of 'input'

76 Views Asked by At

I've got an error, when I try to bind some input data with a class properties using ngModel

I've tried all the solutions I found and nothing helped me.

EXPECTED: Add a new user(name, age) in the array of users.

I can bind only input of user age but not name. You can see a screenshot of the error on a image below.

app.component.ts:

import { Component, Input } from '@angular/core';
import { User } from './models/user-model';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular1';

  name: string;
  age: number;

  users: User[] = [];


  constructor(private userkek: UserService) {
    this.users = userkek.getUsers();
  }

  AddUser(): void{
    this.users.push(new User(this.name, this.age));
    this.ClearUser();
  }
  ClearUser() {
    this.name = "Name";
    this.age = null;
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The error

app.component.html:

<div>
  <h1>{{title}}</h1>
</div>

<div>
  Name <input [(ndModel)]="name" type="text">
  Age <input [(ngModel)]="age" type="number">

  <button (click)="AddUser()" >Add user</button>
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of users">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>
0

There are 0 best solutions below