Question

我正在使用自定义表单控件的应用程序，需要在单击“下一步”按钮之前进行验证。对于标准的HTML表单控件，angular的内置验证非常好，允许我将{Next}按钮与ng-disabled上的form.$valid绑定。但是，我无法在相当困难的控制下进行自定义验证。这是我的情况：

我有一个用于表单控件的自定义指令（一个名为mySlider的组件）
mySlider包装第三方组件angular-slider - 是的，我知道它已被弃用
我们要验证用户是否已点击滑块。如果用户未单击滑块控件，则不应启用“下一步”按钮。
我尝试通过向第三方指令元素添加has-changed属性并单击更新它来创建此自定义验证，但它似乎没有按预期工作。
我尝试检查built-in validations work（例如：尝试搜索var requiredDirective）以及阅读Angular Forms Guide的方式，但它仍然有点不清楚
我们要求不使用jQuery，jQuery UI / Mobile等，但它也必须适用于移动触摸事件

See my Plunk and help - 如果您要进行编辑，请分叉。自定义验证器和自定义Slider指令位于script.js，而第三方指令位于angular-slider.js。

Answer 1

您需要在表单模型上使用$ setValidity函数来切换滑块的有效性状态。这将为您提供制定复杂形式规则的灵活性，每个组件都是不同的。

这是解决问题的工作代码。我将你的ng-change转换为ng-click，比较了开始和之后的值Working Plunkr

link: function (scope, element, attrs) {
    // Slider init
    scope.max = 100;
    scope.min = 0;
    scope.initial = 50;
    scope.sliderValue = scope.initial;
    //Set validity to false by default
    scope.myForm.mySliderControl.$setValidity('hasChanged',false); 

    // ng-change is not coded with this example, converted to ng-click
    scope.change = function(){
      if(scope.initial != scope.sliderValue){
          console.log("I have changed!");
          scope.myForm.mySliderControl.$setValidity('hasChanged',true);
      } 
    };
  }

旁注。导致问题的几个问题：

angular-slider未编码为启用您尝试使用的ng-change功能
您的mySlider指令应具有隔离范围并通过配置对象传递选项。目前，它与控制器的范围相同，这意味着该指令无法真正重复使用。
这里的复合指令只会增加复杂性

用于自定义指令表单控件的AngularJS Custom表单验证器

1 个答案: