Question

我希望向ui-tinymce textarea添加验证以检查是否为空

<form id="SomeForm">
<textarea
 id="QuestionBody"
 name="questionBody"
 ng-model="vm.body"
 ui-tinymce="vm.tinymceOptions"
 required>
</textarea>

带有下一条错误消息

<div ng-messages="SomeForm.questionBody.$error">
<label
for="QuestionBody"
class="error-text"
ng-message="required">
Error
</label>
</div>

如果用户点击Enter，required没有看到该主体为空，则会出现问题，因为ui-tinymce会添加<p>&nbsp</p>之类的内容。

首先我尝试添加配置valid_elements属性

valid_elements : '-#p'

但它会删除所有空的p元素。

forced_root_block也无济于事

如果textarea有字符，我如何添加使表单有效的验证？

如果可能没有jQuery

Answer 1

您看到的问题是像validate这样的标准指令只计算字符数，所以这是一个简单的（空）HTML样本：

<p></p>

当实际上没有“可见”内容时，确实会显示为7个字符。

这里最简单的解决方案是构建一个自定义指令并对HTML使用jQuery的.text（）函数。这将删除所有HTML标记，并提供编辑器中实际文本字符数的近似值。

指令中用于完成工作的代码部分将是这样的：

var jStrippedString = jQuery(modelValue).text().trim();
return (maxlength < 0) || 
       ngModelCtrl.$isEmpty(jStrippedString) || 
       (jStrippedString.length <= maxlength);

我相信你会想要创建一个自定义属性指令，它允许你抓取编辑器的模型数据并自己执行这个验证。

需要UI-tinimcy textarea

1 个答案: