javascript - AngularJS 客户端验证 : Changing validation requirements depending on other fields?

Question

我想使用 AngularJS 自己的表单验证来验证我的字段。但是，当其他字段有数据时，我只想检查某些字段。例如

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

基本上，Billing address 是可选的，但是一旦填写了其中的任何部分，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 .

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

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

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