Question

我想使用AngularJS自己的表单验证来验证我的字段。但是，我只想在其他字段有数据时检查一些字段。 E.g。

<form novalidate name="myForm" ng-submit="submitThisForm()">

    <h1>Shipping address</h1>
    <!-- These are the inputs -->
    <input name="sAddress1" type="text" ng-model="sAddress1" required>
    <input name="sAddress2" type="text" ng-model="sAddress2" required>
    <input name="sAddress3" type="text" ng-model="sAddress3">
    <!-- These are the errors -->
    <div class="error" ng-show='(myForm.sAddress1.$invalid) && myForm.submitted'>Required</div>
    <div class="error" ng-show='(myForm.sAddress2.$invalid) && myForm.submitted'>Required</div>

    <h1>Billing address (if different)</h1>
    <!-- These are the inputs -->
    <input name="bAddress1" type="text" ng-model="bAddress1" required>
    <input name="bAddress2" type="text" ng-model="bAddress2" required>
    <input name="bAddress3" type="text" ng-model="bAddress3">
    <!-- These are the errors -->
    <div class="error" ng-show='(myForm.bAddress1.$invalid) && myForm.submitted'>Required</div>
    <div class="error" ng-show='(myForm.address2.$invalid) && myForm.submitted'>Required</div>

</form>

基本上，结算地址是可选的，但是一旦填写了任何部分，bAdress1和bAddress2就变为必需。我如何实现这一目标？

（变量myForm.submitted在页面加载时设置为false，然后在提交表单时设置为true，因此它只显示一次验证。）我更喜欢vanilla JS的答案，但我使用的是jQuery对于这个项目，所以也没关系。

编辑：这是一个漂亮的格式化布局的答案：

在HTML文件中：

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="doWeNeedThis()"/>
<input name="bAddress2" type="text" ng-model="bAddress2" ng-required="doWeNeedThis()"/>
<input name="bAddress3" type="text" ng-model="bAddress3"/>

在JS文件中：

$scope.doWeNeedThis = function() {
    if((document.getElementsByName("bAddress1")[0].value != "")
        || (document.getElementsByName("bAddress2")[0].value != "")
        || (document.getElementsByName("bAddress3")[0].value != "")) {
        return true;
    } else {
        return false;
    }
};

非常感谢Davin的快速（和完整）答案。

Answer 1

ng-required将允许您运行表达式以确定该字段是否必需。

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="doWeNeedThis()">

ng-required是documented with form。

因此，在您的示例中，您可以在控制器中实现doWeNeedThis()函数并检查模型的值以确定是否需要输入。

否则，在简单的情况下，您可以直接将表达式写入ng-required表达式：

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="bAddress1 || bAddress2">

AngularJS客户端验证：根据其他字段更改验证要求？

1 个答案: