自动与表单进行角度绑定答案

【问题标题】：Angular binding with form automatically自动与表单进行角度绑定
【发布时间】：2016-05-11 14:50:15
【问题描述】：

jsfiddle 演示：https://jsfiddle.net/zpufky7u/1/

我在网站上有很多表单，工作正常，但突然 angular 将所有表单与class="ng-pristine ng-valid" 绑定

这是一个设置还是什么会导致 Angular 自动绑定表单？

我使用的是角度版本：angular#1.4.7

下面是我的表格，你可以看到表格里面没有模型

<form name="app_bundle_notification_type" method="post">

    <div class="row">
        <div class="col-sm-8">
            <div class="form-group">
                <div class="checkbox">
                    <label class="required">
                        <input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
                        Yes, I would like to receive email newsletter for new deals, coupons and news.
                    </label>

                </div>


            </div>

        </div>
    </div>

    <div class="row m-y-1">
        <div class="col-sm-12">
            <button type="submit" class="btn btn-success">Save</button>
        </div>
    </div>

    <input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>

Angular app.js

define(['angular'], function() {

    var app = angular.module("myApp", []);

    app.init = function () {
        angular.bootstrap(document, [app.name]);
    };

    return app;
});

到目前为止，我发现了问题，如果您执行angular.bootstrap(document, [app.name]);，那么它正在绑定表单。它以前没有引起这个问题。

【问题讨论】：

它由角度自动设置。请参阅 Angular 文档的形式：docs.angularjs.org/api/ng/directive/form
每当你使用 ngModel 时，Angular 都会添加诸如 ng-pristine 和 ng-valid 之类的类。如果你不需要这些类，你可以忽略它们。
我的表单中没有任何 ngModel，我的所有表单都工作正常，然后突然它们不再工作了，我发现了这个问题。 angular 会自动绑定我所有的表单，这会阻止它们被提交。所以每次提交任何表单时，它只会添加类 ng-submitted 或 ng-submitting
我建议您将代码回滚到它停止工作之前，看看您所做的更改导致它停止工作；如果它是由向表单字段添加一些类引起的，我会感到非常惊讶。（请注意，您的表单上没有“操作”属性；您是否在某个地方有一个应该处理该问题的提交处理程序？如果有，那是我首先要看的地方。如果没有，那么，这就是您的答案。）
是的，没有任何动作是好的，因为如果我禁用 js 或删除 angular，它会再次开始工作。这是角度问题，这是没有意义的，因为它以前工作过。（我没有可用于角度库的回滚选项）

标签： html angularjs forms angularjs-scope

【解决方案1】：

https://docs.angularjs.org/api/ng/directive/form

因此，Angular 会阻止默认操作（表单提交到服务器）除非<form> 元素具有操作属性 指定。

新版本接受空action=""，在https://github.com/angular/angular.js/pull/3776查看发布版本

【讨论】：

【解决方案2】：

假设您在表单周围使用了表单标签，Angular 会自动将这些类添加到表单内的每个 ng-model。

这使您可以更好地控制表单中的元素，以执行您希望表单在提交之前捕获或强制执行的任何验证或逻辑。

其中大部分都列在文档here

【讨论】：

是的，但我的表单中没有任何 ng-model，让我分享我的表单:)
您有什么理由不使用ng-model？您是否尝试过将输入中的 value 替换为 ng-model 并绑定到属性？
我没有在此表单上使用模型或 ng-value。这种形式完全没有棱角。 Angular 依赖于页面的唯一原因是标题上的通知，它显示通知并提取最新通知。这根本不是表格的一部分。但我也删除了它们，只是为了测试错误在哪里，到目前为止，如果加载了 angular.js，那么表单会自动绑定
如果你打算使用 Angular，它会自动将这些类绑定到任何形式，这就是它的工作方式。无法将其关闭或在某些情况下不使用它。您必须更改表单以使用 Angular，或更改通知以不使用 Angular。很抱歉，我没有更好的解决方案给你。