角wysiwyg形式验证

Question

我正在尝试使用angular-wysiwyg和表单验证。我没有使用标准的form.textArea.$dirty，而是更新了作用域上的一个标志：

​

$scope.onTextChange = function (value) {
  $scope.textContent = value;
  $scope.isContentDirty = true;
  ...
}

​

然后我可以使用按钮上的属性：

​

<button ng-diabled="isContentDirty"></button>

​

但我更愿意做这样的事：

​

<wysiwyg name="myTextArea" ng-model="textContent"></wysiwyg>

<button ng-disabled="!form.myTextArea.$dirty></button>

​

我怎么能让这件事成功呢？

以下是一个与此相关的公开问题：

https://github.com/TerryMooreII/angular-wysiwyg/issues/43

下面是这个指令的文档：https://github.com/TerryMooreII/angular-wysiwyg#usage

Answer 1

我找到了一个让我足够高兴的解决方案。事实证明，你可以通过引用来检查任何表格项目的有效性。

myForm.editor.$error

在这里引用“编辑器”表单项上的错误：

<form name="myForm">
    <wysiwyg name="editor"></wysiwyg>
</form>

当您转到指令中的链接步骤时，可以设置$parsers，这基本上允许您在满足某些条件的情况下使表单失效：

angular.module('foo').directive('wysiwyg', function() {
    return {
        restrict: 'E',
        require: 'ngModel', //the 'value' of the form item
        template: 'my template',
        link: function(scope, elem, attrs, ngModel) {

            function checkCustomError(viewValue) {
                valid = viewValue.someCondition === 'someValue';
                ngModel.$setValidity('customError', valid);
                return viewValue;
            }

            ngModel.$parsers.unshift(checkCustomError);
        }
    }
}

错误将出现在formName.directiveName.$error.customError下面

还有其他使ngModel失效的方法，例如将ng-maxlength置于指令中，但我认为这是最有信息的解释方法。