AngularJS中的依賴字段的表單驗證

我有一個對象有2個字段，而1應該小於或等於另一個。AngularJS中的依賴字段的表單驗證

說這是HDD配額設置，我需要threshold小於或等於HDD的size。我想使用角的ui-utils#validate。

我這是怎麼走到這一步：http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview（我希望鏈接將工作）

，我遇到的問題是，它向一個方向：

設置size，然後用threshold打正常工作

但是，如果我嘗試更改size,threshold處於無效狀態 - 沒有任何反應。這是因爲在模型上沒有設置無效的threshold，而將size的ID與null或undefined（或類似的東西）進行比較。

一方面，我明白了不在模型上設置無效值的邏輯......但這裏它正在阻礙我。

因此，任何幫助使這項工作將不勝感激。

來源

2013-05-28 Michael Vashchinsky

正在這裏討論這個問題：https://github.com/angular-ui/ui-utils/issues/25 – ProLoser

爲了避免這種情況的發生，需要在表單輸入元素中添加ng-model-options =「{allowInvalid：true}」來避免這種情況的發生 - 問題在於，當$ q服務拒絕響應時型號默認情況下不會更新。瘋了吧！花一天時間來解決這個問題。 – danday74

我玩過自定義指令，並烹飪了適合我的情況的東西。

在我輸入threshold我有less-than-or-equal="quota.size"指令，傳遞模型的屬性，以驗證對（我想quota.threshold小於或等於quota.size）：

<input type="number" name="threshold" 
    ng-model="quota.threshold" 
    required 
    less-than-or-equal="quota.size" />

在linklessThanOrEqual指令的功能，它開始看quota.size當它只是試圖quota.size更改設置的threshold當前視圖值型號：

link: (scope, elem, attr, ctrl) -> 
    scope.$watch attr.lessThanOrEqual, (newValue) -> 
     ctrl.$setViewValue(ctrl.$viewValue)

然後是解析器通過調用scope.thresholdValidate(thresholdValue)方法傳遞候選值來進行驗證。該方法返回true如果驗證成功，如果它 - 它返回新的值，否則 - 電流模式的價值：

ctrl.$parsers.push (viewValue) -> 
     newValue = ctrl.$modelValue 
     if not scope.thresholdValidate viewValue  
      ctrl.$setValidity('lessThanOrEqual', false) 
     else 
      ctrl.$setValidity('lessThanOrEqual', true) 
      newValue = viewValue 
     newValue

我推解析器解析收藏，相反unshifting它最喜歡的例子建議，因爲我要的角度來驗證required和number指令，所以我來到這裏只是如果我有一個有效的和解析數（對我來說工作少，但對於text投入也許我應該做的解析工作）

這裏我的遊樂場：http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

來源

2013-05-30 23:01:15

對於'ctrl。$ setViewValue（ctrl。$ viewValue） – rluba

遲到比晚上好，你需要添加ng-model-options="{allowInvalid:true}"到你的表單輸入元素來阻止這種情況的發生 - 問題是當承諾被拒絕時（例如，使用$q或$http），該模型默認情況下不會更新。瘋了吧！花一天時間來解決這個問題。

我已經寫了plunkr專門針對這個問題 - 相信我，這個代碼是好的... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview

來源

2015-11-23 07:55:29 danday74

AngularJS中的依賴字段的表單驗證

回答

相關問題