AngularJS - 對錶單提交進行額外的驗證

Question

我一直在Google上搜索一段時間，似乎無法爲我的具體情況找到一個好答案。我找到了實時驗證的方法，但是我希望在用戶點擊「提交」後將其與一些自定義驗證結合起來。我想讓用戶仍然可以點擊提交，即使它無效，但我會在代碼中取消提交。看看下面的代碼：

<form name="cashForm" id="cashForm" novalidate> 
    <input type="text" id="name" required /> // 
    <input type="number" placeholder="Tax: " required name="tax" id="tax" /> 
    <input type="number" placeholder="Tip: " required name="tip" id="tip" /> 
    <button ng-click="submission()" ng-disabled="paymentForm.$invalid">Submit</button> 
</form> 


//inside controller 
this.submission = function() { 
    //check if tip + tax is over 20 
    //prevent form and show error message if not 
    //otherwise allow default behavior 
} 

所以我只希望如果稅務/提示是超過10.我如何檢查這種形式實際上提交以及如何防止表單提交，如果它不符合要求？另外，我會把這個邏輯放在控制器中嗎？

Answer 1

它看起來很接近你對我的看法。只是一對夫婦的事情...

添加ng-model指令，以你的輸入控件創建雙向數據綁定，你可以拿起並在你的控制器使用方法：

<form name="cashForm" id="cashForm" novalidate> 
    <input id="name" name="name" type="text" ng-model="nameValue" required /> 
    <input id="tax" name="tax" type="number" ng-model="taxValue" placeholder="Tax: " required /> 
    <input id="tip" name="tip" type="number" ng-model="tipValue" placeholder="Tip: " required /> 
    <button 
     ng-click="submission()" 
     ng-disabled="paymentForm.$invalid"> 
     Submit 
    </button> 

進樣$scope到您的控制器，讓你拿起這些ng-model綁定在你的控制器的submission方法：

function submission() { 

    $scope.errorMsg = ""; 

    if ($scope.taxValue <= 10) { 
     $scope.errorMsg = "tax not greater than 10"; 
     return; 
    } 

    if ($scope.tipValue <= 10) { 
     $scope.errorMsg = "tip not greater than 10"; 
     return; 
    } 

    // If you reached here your post-click validation passed, 
    // so continue to submit the data... 

} 

然後，您可以使用ng-if指令用CSS類，突出了錯誤信息顯示錯誤消息：

<div ng-if="!!errorMessage" class="text-danger"> 
    {{ errorMessage }} 
</div> 

最後，一旦你在你的控制器使用$scope破解你可能想了解感知罪惡使用$scope，並考慮切換到控制器語法。退房John Papa的博客文章AngularJS's Controller As and the vm Variable