多個角度校驗器獨立工作，但不在一起

Question

我寫了兩個驗證指令。每個人都可以單獨工作，但是當兩者都應用時，numberValidator在任何時候都會失敗rangeValidator失敗（因此，因爲「3」失敗了rangeValidator，所以即使rangeValidator超出圖片範圍，它也會失敗numberValidator）。

日誌記錄驗證numberValidator確實失敗（與HTML中的某些錯誤相比）。

我會期望指令獨立於另一個 - 我不想讓用戶輸入「3」，仍然看到「必須是數字」。

使用數字輸入不是一個選項。

我的JS：

app.directive('rangeValidator', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elm, attrs, ctrl) { 
      var min = scope.$eval(attrs.minValue); 
      var max = scope.$eval(attrs.maxValue); 
      ctrl.$parsers.unshift(function (viewValue) { 
       if (parseInt(viewValue) >= min && parseInt(viewValue) <= max) { 
        // it is valid 
        ctrl.$setValidity('rangeValidator', true); 
        return viewValue; 
       } else { 
        // it is invalid, return undefined (no model update) 
        ctrl.$setValidity('rangeValidator', false); 
        return undefined; 
       } 
      }); 
     } 
    }; 
}); 


app.directive('numberValidator', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elm, attrs, ctrl) { 
      ctrl.$parsers.unshift(function (viewValue) { 
       if (!isNaN(parseInt(viewValue))) { 
        // it is valid 
        console.log('Number Validator passed!'); 
        ctrl.$setValidity('numberValidator', true); 
        return viewValue; 
       } else { 
        // it is invalid, return undefined (no model update) 
        ctrl.$setValidity('numberValidator', false); 
        return undefined; 
       } 
      }); 
     } 
    }; 
}); 

Answer 1

我看到你跟着角文檔的意見和解析器函數中無效的值返回undefined。這樣做的問題在於它打破瞭解析器管道：首先檢測到無效值的指令會將undefined傳遞給下一個，這顯然也認爲它無效。

我能想到的兩種解決方案：

1）讓原始值通過分析器管道流量：

ctrl.$parsers.unshift(function (viewValue) { 
    if (parseInt(viewValue) >= min && parseInt(viewValue) <= max) { 
     ctrl.$setValidity('rangeValidator', true); 
    } else { 
     ctrl.$setValidity('rangeValidator', false); 
    } 
    return viewValue; 
}); 

... 

ctrl.$parsers.unshift(function (viewValue) { 
    if (!isNaN(parseInt(viewValue))) { 
     ctrl.$setValidity('numberValidator', true); 
    } else {  
     ctrl.$setValidity('numberValidator', false); 
    } 
    return viewValue; 
}); 

工作演示here。

這不會阻止模型被更新爲無效值，並且您需要使用$valid或$invalid屬性在使用其值之前檢查字段狀態，但是您可以獨立檢查錯誤彼此的。

2）設置不同的優先級與兩指令

您可以控制指令是由不同的優先級設置爲每個人，並通過這樣做，你可以以增量方式檢查無效值執行的順序，像這樣：

<span ng-show="form.value.$error.rangeValidator">Invalid range</span> 
<span ng-show="!form.value.$error.rangeValidator && form.value.$error.numberValidator">Invalid number</span> 

工作演示here。

它配備了一個警告：隨着越來越多的驗證添加它可能會變得非常混亂。

就我個人而言，我更喜歡第一種方法，即使它不能防止模型被無效值更新。