angular-所见即所得的表单验证

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

这将在此处引用 "editor" 表单项上的错误：

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

当您转到指令中的 link 步骤时，您可以设置 $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 放在指令上，但我认为这是最有用的解释方式。

angular-所见即所得的表单验证

angular-wysiwyg form validation

wysiwyg

angularjs

angularjs-directive