Question

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

<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

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

1 个答案: