Angular 15.2.7报错：无法绑定'ndModel'，用户添加功能异常求助

问题现象 #

开发时通过ngModel绑定输入框与组件属性，实现添加用户（姓名、年龄）到用户数组的功能，出现报错：

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

仅年龄输入框能正常绑定，姓名输入框无法绑定，无法完成用户添加操作。

问题根源 #

查看模板代码发现，姓名输入框的ngModel指令拼写错误，写成了ndModel（缺少字母g），导致Angular无法识别该属性，从而抛出绑定错误。

解决方案 #

修正app.component.html中姓名输入框的绑定指令拼写：

错误代码片段 #

Name <input [(ndModel)]="name" type="text">

修正后代码片段 #

Name <input [(ngModel)]="name" type="text">

完整修正后的app.component.html #

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

<div>
  Name <input [(ngModel)]="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>

验证说明 #

你的app.module.ts已正确导入FormsModule（ngModel依赖该模块才能生效），组件类中的属性定义、方法逻辑均无问题，仅修正模板中的拼写错误即可解决绑定问题，实现正常添加用户功能。

内容的提问来源于stack exchange，提问作者Maxim Rudolovskii