ng2-ckeditor的CKEDITOR组件在Angular表单中绑定ngModel失效问题求助

核心原因 #

在Angular的模板驱动表单（即使用#xxx="ngForm"的表单形式）中，所有绑定了[(ngModel)]的表单控件必须配置唯一的name属性，否则Angular无法将该控件注册到表单实例中，会直接导致双向绑定失效。你当前的<ckeditor>标签未配置name属性，这是绑定失效的核心原因。

次要优化点 #

你的模板中[(ngModel)]="this.messageOfTicket"的写法不需要加this前缀，Angular模板默认直接访问组件类的属性，加this反而可能在部分版本中出现取值异常。

修复后的代码 #

index.html 表单内ckeditor部分修改为： #

<ckeditor 
  name="ticket_MessageOfTicket"
  #ticket_MessageOfTicket="ngModel"
  [(ngModel)]="messageOfTicket"
  [config]="config">
</ckeditor>

验证 #

修改完成后重新启动开发服务即可看到编辑器正常加载初始值，输入内容也能正常同步到组件的messageOfTicket变量中。

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