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 { }
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>
