隐藏的输入字段导致模态表单无效答案

【问题标题】：Hidden input fields causing modal form to be invalid隐藏的输入字段导致模态表单无效
【发布时间】：2015-10-08 09:50:36
【问题描述】：

我有一个 Angular js 应用程序，其中我有一个模式表单来捕获付款详细信息。我正在使用 angular required 属性验证输入字段，如下所示。

<input name="cardNumInput" required type="text" size="20" class="form-control" ng-model="userInput.paymentParams.CardNumber" ng-minlength="13" ng-maxlength="19"/>

根据用户的选择，某些字段是可见的。我的要求是仅使用 required 属性验证可见字段。但看起来即使是隐藏的输入也正在被验证。仅当整个表单有效时，我的提交按钮才会启用。我如何告诉 Angular 不验证隐藏字段。 http://plnkr.co/edit/8REV5ai52QylxuBbYCrn?p=preview

我还有一个问题，即无法向用户表明我的下拉菜单也是强制性的 - 通过在输入字段上显示红色边框。

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

输入是否可见对于验证无关紧要。所以尝试使用 ngIf 代替 ngShow

更新

对于选择突出显示，您可以使用与输入相同的方法（使用 ngClass 指令设置类），但是 Bootstrap 没有选择元素的错误样式，因此您应该定义自己的（或者您可以自己扩展它你少用了）

例如

select.has-error{ border: 1px solid #a94442;}

http://plnkr.co/edit/FMLxDKBkPkuHmtEvzMrL?p=preview

【讨论】：