AngularJS自定義指令表單控件的自定義表單驗證程序

我正在使用自定義表單控件的應用程序，該應用程序需要在單擊「下一步」按鈕之前進行驗證。對於標準的HTML表單控件，angular的內置驗證非常好，允許我將Next按鈕與form.$valid值上的ng-disabled綁定。但是，我很難讓自定義驗證在相當困難的控制下工作。這裏是我的情況：AngularJS自定義指令表單控件的自定義表單驗證程序

我有一個自定義指令，我的表單控件
mySlider（稱爲mySlider一個組件）包裝了一個第三方組件angular-slider - 是的，我知道這是過時
我們想驗證用戶是否點擊了滑塊。如果用戶沒有單擊滑塊控件，則不應啓用「下一步」按鈕。
我試圖通過向第三方指令元素添加一個has-changed屬性來創建此自定義驗證，並將其更新爲點擊，但它似乎沒有按預期工作。
我試圖研究如何built-in validations work（例如：嘗試搜索var requiredDirective），以及閱讀Angular Forms Guide，但它仍然是一個有點不清楚
我們有一個要求，不使用jQuery和jQuery UI /手機等，但是它還必須適用於移動觸摸事件

See my Plunk and help - 請在您要編輯時分叉。自定義驗證器和自定義滑塊指令位於script.js，而第三方指令位於angular-slider.js。

來源

2015-09-24 Julian Soro

我有東西給你不久 –

您需要在表單模型上使用$ setValidity函數來切換滑塊的有效性狀態。這將爲您提供靈活性，使您能夠製作複雜的表單規則，而每個組件都是不同的。

這裏是工作代碼來解決你的問題。我轉換您的NG-更改爲NG-點擊，相比開始和值後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不編碼，使你試圖使用
你mySlider指令應該有一個分離的範圍，並通過一個配置對象傳遞選項NG-變化的功能。目前，它與控制器的範圍相同，這意味着該指令不能真正被重用。這裏
複利指令只會增加併發症

來源

2015-09-24 05:08:10

謝謝你的職位 - 這是有幫助的。但是，這種方法的一個缺點是，我不能只將my-slider添加到myOtherForm中。有沒有辦法讓'myForm'的引用更通用？ –

我想我知道該怎麼做......我可以將表單名稱傳遞給'mySlider'指令，然後用'scope [formName] [mySliderName]。$ setValidity'動態地引用表單。讓我們看看它是否工作... –

當我製作自定義指令時，我通常會有一個選項屬性，它鏈接到一個作用域對象，該對象在我的配置設置''和$ scope.slider1Options 。從那裏我可以設置雙向數據綁定（作爲對象的屬性傳入scope.myForm.mySliderControl）。 –

AngularJS自定義指令表單控件的自定義表單驗證程序

回答

相關問題