AngularJS:防止验证隐藏的表单字段

Question

防止在AngularJS中验证隐藏表单字段的最佳方法是什么？

Answer 1

我最初错过了内置ngRequired指令.还有一个required标签,让我困惑.

现在,我们可以使用相同的逻辑(我们用来隐藏元素)来设置ngRequiredfalse.

这是一个实例用例:我想向已婚人士询问他们拥有的孩子数量,但是,如果他们没有结婚,只需隐藏有关儿童的字段.

<form ng-app name="form">

    Marital status:
    <select  ng-model="maritalStatus" required>
        <option value="">Select...</option>
        <option value="M">Married</option>
        <option value="UM">Unmarried</option>
    </select>

    <div ng-show="maritalStatus == 'M'">
        Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
    </div>

    (for testing) Is this form correctly filled? {{form.$valid}}

</form>

Answer 2

您也可以使用ng-if而不是ng-show在DOM /表单中完全添加或删除它.

<div ng-show="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
</div>

对此

<div ng-if="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="true">
</div>