【问题标题】:Textarea with ng-model is not submitting when using wysiwyg使用所见即所得时,带有 ng-model 的 Textarea 未提交
【发布时间】:2018-02-15 06:18:11
【问题描述】:

我尝试使用 ng-submit 制作表单。在表单中有一个名为 wysiwyg 的文本区域(它是 trumbowyg)。提交时,除了那个textarea之外,所有的表单数据都被提交了。

<div ng-controller='contactCtrl'>
   <form id="inquiryForm" ng-submit="contact()">
   <div class="form-group">
      <label>Name</label>
      <input type="text" ng-model="formData.name" name="name" class="form-control" required="" />
   </div>
   <div class="form-group">
      <label>Email</label>
      <input type="text" ng-model="formData.email" name="email" class="form-control" required="" />
   </div>
   <div class="form-group">
      <label>Message</label>
      <textarea ng-model="formData.message" name="message" class="form-control editor" required=""></textarea>
   </div>
   <button type="submit" class="btn btn-success">Submit</button>
</form>

在 app.js 中

.controller('contactCtrl', function ($scope, $http) {
   $scope.formData = {};
      $scope.contact = function (){
      console.log($scope.formData);
   }
}

如你所见,我在textarea 中通过editor 类调用trumbowyg。提交表单时,不发送 textarea 而其他发送。当我从课堂上删除editor 时,它运行良好。为什么使用trumbowyg时没有提交?

【问题讨论】:

  • 将 textarea 上的 name="name" 更改为 name="message" 并查看
  • 好吧,显然在我更改后它仍然无法正常工作。我更新了我的问题
  • 它没有被发送,因为你的 textarea 被 trumbowyg 覆盖了。您已将 ng-model 添加到 textarea 而不是 trumbowyg 。因此,您在 trumbowyg 中编写的任何内容,angular 永远不会知道。因此没有数据绑定到 ng-model。
  • 那么,有没有办法让它与 trumbowyg 一起工作?

标签: angularjs angularjs-ng-model ng-submit trumbowyg


【解决方案1】:

trumbowyg 正在将您的 html 更新到 angularJs 范围之外,因此请使用一些插件,例如

github.com/lizardK/trumbowyg-ng

以便 angularJs 知道对您的 Html 进行了哪些更改。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-21
    相关资源
    最近更新 更多