Angular 19项目构建时ngModel指令出现NG5002错误求助

问题说明 #

在Angular 19构建Todo项目时触发NG5002错误：

NG5002: 动画触发器输出事件(@ngModelChange)缺少阶段值名称（目前支持start或done）

已在app.component.ts中导入FormsModule，尝试通过[(ngModel)]实现input元素与task变量的双向绑定，但报错无法解决。

相关代码 #

app.component.html #

<div>
  <div className="navbar">
    <nav >
      <ul>Todo App</ul>
    </nav>
  </div>

  <div className = "heading" id = "headingBegin">
    <div >Put your todo items here</div>
  </div> 

<div id = "headingForm">
  <form action="">
    <label for="todotitle">Todo Title</label><br>
    <input [(@ngModel)]="task"  type="text" id="todoid"  value=""><br>
    <label for="desc">Todo Description </label><br>
    <input type="text" id="descname" name="descname" value=""><br><br>
    <input type="button" id="submit-btn" value="Add Todo" (click)="addTask()" >

  </form>

  @for(task of taskList; track task.id){
  <ul class="task-list">
    <li> {{task.id}}</li>
    <li> {{task.name}}</li>
    <li> <button (click)="deleteTask(task.id)">Delete</button> </li>
  </ul>
  }
</div>

</div>

app.component.ts #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet,FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'todoapp';
  task = "client meet at 12"
 // taskList: {id : number, name : string, desc : string, completed: boolean}[] = []
  taskList: {id : number, name : string}[] = []

  changed(){

  }
  
  addTask(){
    this.taskList.push({id: this.taskList.length+1, name: this.task })
    this.task = "";
  }
  deleteTask(id:number){
    this.taskList = this.taskList.filter((item)=>item.id != id)
  }
}

报错原因与解决方案 #

报错原因 #

代码中错误地将ngModel双向绑定语法写成了[(@ngModel)]，这是Angular动画触发器的语法格式（用于监听动画的start或done阶段），导致Angular将ngModel识别为动画触发器，进而要求指定阶段值，触发NG5002错误。

正确的双向绑定语法是[(ngModel)]，而[(@x)]是绑定动画触发器并监听其阶段事件的写法（例如[(@fade)]="animationState"）。

解决方案 #

将input元素的绑定语法修正为正确的双向绑定格式，并移除多余的value=""（ngModel会自动管理输入框的值）：

修正后的input代码：

<input [(ngModel)]="task" type="text" id="todoid">

修改后重新运行项目，即可解决该报错。

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