ng-class 不会在无效的表单字段上触发答案

【问题标题】：ng-class does is not triggered on invalid form fieldng-class 不会在无效的表单字段上触发
【发布时间】：2014-10-07 21:47:42
【问题描述】：

我正在测试 angular-fcsa-number 指令，在此过程中，即使该字段无效，输入字段的包装器元素也未分配“has-error”类。在我看来，ng-class 不承认该字段是无效的。我在这里做错了什么？

<form id="form1" runat="server" name="form1">
    <div class="form-group" data-ng-class="{ 'has-error': form1.fcsaPlugin.$invalid }">
        <label>FCSA Number</label>
        <input type="text" name="fcsaPlugin" class="form-control" data-ng-model="action.FV10036" fcsa-number />
    </div>
</form>

【问题讨论】：

您是否将fcsa-number 插件作为依赖项添加到您的应用程序模块中？ github.com/FCSAmericaDev/angular-fcsa-number#quick-start
是的，我做到了。该指令的功能可以正常工作（添加千位分隔符、限制位数等）。只是当它无效时，它不会将'has-error'类添加到包装元素中。我确实在 Chrome 开发者工具上看到了 ng-invalid 类是在 input 和 form 元素上设置的，所以我不确定为什么 ng-class 不接受它。
这对我很有效：plnkr.co/edit/gE1Y5NcVEi3K88h3gnQL?p=preview
我正在结合 ASP.NET WebForms 和 AngularJS。显然，当我从表单标签中取出 runat="server" 属性时，ng-class 可以正常工作。
尝试在表单元素中添加data-ng-form="form1"

标签： angularjs ng-class

【解决方案1】：

正如您所说，当您删除 runat="server" 属性时它会起作用。您是否有机会使用 asp.net MasterPages。如果您尝试检查 html，基本上检查呈现的 html 中的表单名称。如果您在 asp.net 中使用 MasterPage，则表单的名称将是 aspnetForm，因此您的 data-ng-class 应该是

data-ng-class="{ 'has-error': aspnetForm.fcsaPlugin.$invalid }"

【讨论】：