用于自定义指令表单控件的AngularJS自定义表单验证程序

我正在开发一个带有自定义表单控件的应用程序，在单击下一步按钮之前需要对其进行验证。对于标准HTML表单控件，angular的内置验证非常好，允许我使用

表单上的
ng disabled
值绑定下一个按钮。$valid

值。然而，我很难让自定义验证在一个相当困难的控件中工作。以下是我的情况：

• 我有一个表单控件的自定义指令（一个名为

  mySlider

  的组件）

• mySlider

  包装了一个第三方组件——是的，我知道它不推荐使用
• 我们要验证用户是否单击了滑块。如果用户未单击滑块控件，则不应启用“下一步”按钮。
• 我试图通过向第三方指令元素添加一个

  has changed

  属性来创建此自定义验证，并在单击时对其进行更新，但它似乎没有按预期工作
• 我试着研究如何（例如：尝试搜索

  var requiredDirective

  ），以及如何阅读，但仍然有点不清楚
• 我们要求不使用jQuery、jQuery UI/Mobile等，但它也必须适用于移动触摸事件

---

-如果你要编辑，请用叉子叉。自定义验证器和自定义滑块指令位于

script.js

中，而第三方指令位于

angular Slider.js

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

下面是解决您的问题的工作代码。我将您的ng更改转换为比较begin和after值的ng单击

旁注。导致您出现问题的几个问题：

角度滑块

未编码为启用您试图使用的ng更改功能

您的

mySlider

指令应该具有隔离作用域，并通过配置对象传递选项。目前，它与控制器在同一范围内，这意味着指令不能真正被重用

这里的复合指令只会增加复杂性

---

我马上给你拿点东西谢谢你的来信，这很有帮助。不过，这种方法的一个缺点是，我不能将

我的滑块

添加到

myOtherForm

。有没有办法让对

myForm

的引用更通用一些？我想我知道该怎么做。。。我可以将表单名称传递给

mySlider

指令，然后使用

scope[formName][mySliderName]动态引用表单。$setValidity

。让我们看看它是否有效……当我制定像您所说的那样的自定义指令时，我通常有一个选项属性，该属性链接一个范围对象，该对象在我的配置设置

和$scope.slider1Options中传递。从那里我可以设置双向数据绑定（将scope.myForm.mySliderControl作为对象的属性传递）。我可能用了错误的方法，但我仍然无法动态使用此技术。我无法使用括号方法调用

$setValidity

。我找到了！！！无论出于何种原因，以不同的属性传入

myForm

对象都有效。查看与上一条评论中相同的plunk。谢谢你的帮助！

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);
      } 
    };
  }