AngularJS - 对表单提交执行额外的验证

Question

我已经在谷歌上搜索了一段时间，似乎无法为我的具体案例找到一个好的答案。我找到了进行实时验证的方法，但我想在用户单击“提交”后将其与一些自定义验证结合起来。我想让用户仍然点击提交，即使它无效但我会在代码中取消提交。取以下代码：

<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 注入您的控制器，以便您在控制器的submission 方法中获取那些ng-model 绑定：

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...

 }

然后您可以使用带有突出显示错误消息的 css 类的 ng-if 指令显示错误消息：

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

最后，一旦您在控制器中使用 $scope 破解了，您可能想了解使用 $scope 的感知弊端，并考虑改用控制器作为语法。查看 John Papa 的博文AngularJS's Controller As and the vm Variable