AngularJS 验证异步加载的表单答案

【问题标题】：AngularJS validation of asynchronously loaded formAngularJS 验证异步加载的表单
【发布时间】：2013-08-23 17:41:31
【问题描述】：

我正在构建一个 AngularJS 应用程序，其中包括包含表单并异步加载到 DOM 中的模态窗口（当单击相应的按钮时）。表格工作正常，但我无法正确检查它们是否有效。这是一个例子：

HTML

<div ng-app="myapp" ng-controller="MyCtrl">
    <form novalidate name="myform" ng-submit="submitForm(myform)">
        <input type="text" required ng-model="myname" />
    </form>
</div>

JavaScript

var app = angular.module('myapp', []);
app.controller("MyCtrl", function($scope) {
    $scope.submitForm(form) {
        if(form.$valid) {
            // Do http stuff here
        }
    };
});

如果此表单是异步加载的，则表单变量的值为 NaN，并且 form.$valid 未定义。但是，如果我将它与页面的其余部分一起加载，它可以正常工作。有谁知道如何强制 AngularJS 填充表单的范围变量？谢谢！

【问题讨论】：

如何将表单加载到 DOM 中？
ngInclude。我只是切换模板文件路径进出来改变模态的内容
stackoverflow.com/questions/17474045/… 在这里尝试答案，它可能会有所帮助

标签： javascript forms validation angularjs

【解决方案1】：

当您使用 ng-include 包含表单时，会创建一个 childScope。 parent 和 childScope 无法访问彼此的范围。因此 .$valid 为空。

前几天我遇到了一个类似的问题，并在这个帖子中找到了一个适合我的可行解决方案：

AngularJS $setValidity on childScope form

【讨论】：