如果输入元素未隐藏,则为其设置必需属性

Question

我正在使用angular.js处理动态表单.输入字段

<div ng-show="condition()">
    <input type="text" name="field" required>
</div>

如果condition()返回false,则不会显示输入字段.但是通过点击提交按钮,我将获得chrome,消息:

An invalid form control with name='field' is not focusable.

嗯,一个解决方案是,使用ng-required:

<div ng-show="condition()">
    <input type="text" name="field" ng-required="condition()">
</div>

好吧,这里我必须重复使用条件()几次代码.

当你可以封装ng-show时,它变得很糟糕:

<div ng-show="condition1()">
    <div ng-show="condition2()">
        <input type="text" name="field"
            ng-required="condition1() && condition2()">
    </div>
</div>

有没有更好的方法,当输入可见时,所需的标签应该在那里,而不是,如果它是隐藏的.

Answer 1

使用ng-if而不是使用ng-show,因为当你使用ng-show时,那个元素仍然是DOM的一部分.

这样的事情:

<div ng-if="condition()">
    <input type="text" name="field" required>
</div>

这样你就不会得到错误

An invalid form control with name='field' is not focusable.