Angular中[(ngModel)]不显示值、获取为undefined问题求助

核心错误点 #

• Email输入框绑定语法错误
  你在email输入框上使用的data-ng-model="email"是AngularJS（1.x版本）的模板语法，Angular 2+及以上版本无法识别该指令，因此输入内容完全不会同步到组件类的email属性，取值始终为空/undefined。
  修正为Angular标准双向绑定写法即可：

  <input
    id="email"
    type="email"
    class="w-full p-3 rounded dark:bg-yellow-200 text-black"
    name="email"
    [(ngModel)]="email"
  />
  

• 未正确导入ngModel依赖的FormsModule
  Angular中[(ngModel)]指令属于FormsModule，如果没有在组件所属的模块（独立组件则在组件装饰器的imports数组）中导入该模块，双向绑定会完全失效，所有绑定字段都无法同步输入值。
  修复步骤：

  1. 在对应模块文件（通常为app.module.ts）顶部添加导入语句：

     import { FormsModule } from '@angular/forms';
     

  2. 在@NgModule装饰器的imports数组中加入FormsModule：

     @NgModule({
       declarations: [/* 你的组件声明，包含FooterComponent */],
       imports: [
         BrowserModule,
         HttpClientModule,
         FormsModule // 新增该行
       ]
     })
     

  如果你用的是Angular 14+的独立组件，直接在FooterComponent的@Component装饰器的imports数组中加入FormsModule即可。

可选逻辑优化 #

• 避免表单默认提交刷新问题：你当前将提交逻辑绑定在按钮的click事件上，form内的type="submit"按钮点击时会触发原生表单提交、导致页面刷新，建议将提交事件绑定到form标签的ngSubmit事件上，删除按钮的click绑定：

  <form novalidate="" class="space-y-6" (ngSubmit)="postMessage()">
    <!-- 所有表单项保持不变 -->
    <button
      type="submit"
      class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-violet-400 dark:text-gray-900"
    >
      Send Message
    </button>
  </form>
  

• 修正接口提交提示逻辑：你当前在发起http请求后立刻弹出提交成功提示，没有等待接口返回，建议将成功提示放到请求订阅的回调中，同时增加错误处理：

  this.http.post<any>(this.MSG_URI, this.msgObj).subscribe({
    next: (res) => {
      window.alert('Message posted successfully!');
      // 提交成功后清空表单
      this.uname = this.email = this.message = '';
    },
    error: (err) => {
      window.alert('Submit failed, please try again later.');
    }
  })
  

内容的提问来源于stack exchange，提问作者Vikneysh Raj G G A