Angular新增帖子失败 报ngModel绑定及title、content必填错误求助

问题原因 #

1. 新建帖子模式下未初始化post对象：编辑模式下你会给post赋值现有帖子的内容，但新建模式下post为undefined，导致[ngModel]="post.title"、[ngModel]="post.content"读取属性时报错，连带ngModel绑定失效，表单无法正常收集输入的标题和内容，提交空值触发服务端必填校验报错。
2. 内容输入框的错误校验条件写错：内容输入框下方的mat-error判断的是title.invalid，内容为空时不会触发提示，可能出现内容为空仍能提交的问题。
3. 可选优化：当前使用单向[ngModel]绑定，输入内容不会反向同步到组件的post对象，不符合模板驱动表单的常规使用逻辑，也可能出现值不同步的问题。

你提到已确认导入FormsModule，所以Can't bind to 'ngModel'的报错完全是post未初始化导致绑定表达式异常触发的，修复初始化后该报错会自动消失。

修复步骤 #

1. 组件初始化时根据模式初始化post对象
   在组件的ngOnInit生命周期钩子中，新增新建模式下的post初始化逻辑：

ngOnInit() {
  this.route.paramMap.subscribe(paramMap => {
    if (paramMap.has('postId')) {
      this.mode = 'edit';
      this.postId = paramMap.get('postId');
      // 保留你原有获取编辑态帖子的逻辑
      this.post = this.postsService.getPost(this.postId);
    } else {
      this.mode = 'create';
      // 新增初始化逻辑
      this.post = { id: null, title: '', content: '' };
    }
  })
}

2. 修正内容输入框的错误判断
   把HTML中内容输入框的错误提示条件修改为判断content控件状态：

<mat-error *ngIf="content.invalid">Please enter some content</mat-error>

3. 可选：改为双向绑定避免值不同步
   将两个输入框的单向[ngModel]绑定改为双向[(ngModel)]绑定，保证输入内容和组件post对象的值实时同步：

<input
  matInput
  type="text"
  name="title"
  [(ngModel)] ="post.title"
  required
  minlength="3"
  placeholder="Post Title"
  #title="ngModel"
/>
<!-- 内容输入框同理修改为[(ngModel)] ="post.content" -->

内容的提问来源于stack exchange，提问作者Miloš Milutinov