angularjs - 如果没有隐藏，则为输入元素设置必需的属性

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>

好吧，这里我必须重复代码，多次使用 condition()。

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

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

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

Answer 1

不要使用 ng-show ，而是使用 ng-if，因为当您使用 ng-show 时，该元素仍然是 DOM 的一部分。

像这样:

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

这样你就不会出错

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