已导入FormsModule但ngModel不生效报错问题求助

问题排查结果 #

• 核心原因：组件类中没有声明双向绑定对应的enteredValue属性
  [(ngModel)]双向绑定要求绑定的变量必须在组件类中显式定义，你当前的组件类只声明了newPost，没有enteredValue，因此模板解析时找不到对应变量触发报错。
• 次要原因：模板中[(ngModel)]语法存在多余空格
  你写的[(ngModel)] ="enteredValue"中，语法标记和赋值等号之间多了空格，部分IDE的Angular语法校验会将这种不规范写法识别为错误高亮。
• 可选检查：类名拼写校验
  你当前的组件类名写为PostCreateCompomnet，正确拼写应为PostCreateComponent，如果你的文件名和导入路径和当前拼写匹配则不影响运行，否则会触发模块导入错误。

修复代码 #

修正后的组件文件

import { Component  } from "@angular/core";
@Component({
    selector : 'app-post-create',
    templateUrl: './post-create.component.html'
})
export class PostCreateCompomnet{
    // 新增声明ngModel绑定的属性
    enteredValue = '';
    newPost ='I am Genius';
    onAddPost(){
        this.newPost= this.enteredValue;
    }
}

修正后的HTML模板

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="onAddPost()">Save Post</button>
<p>{{ newPost }}</p>

残留错误处理 #

如果修改后IDE依然有错误高亮，重启IDE或者重启Angular语言服务即可，属于缓存导致的误报。

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