Question

我有一个特定的问题，我需要在使用angular构建的表单中添加嵌套表单。

静态（非编程），我可以执行以下操作：

<form>
   ...
   <ng-form>
       <input ng-model="myModel" required>
   </ng-form>
   ...  
</form>

嵌套表单中的验证错误使外部表单无效。这正是我需要的。

但我似乎无法通过指令进行程序化。在模板中，我有以下

<div dynamic-nested-form="">

</div>

我有以下内容：

(function () {

angular
    .module('controls')
    .directive('dynamicNestedForm', dynamicNestedForm);

function dynamicNestedForm($compile) {
    return {
        restrict: 'A',

        link: linkedFunction
    };

    function linkedFunction($scope, element) {

        var nestedForm = angular.element('<ng-form><input ng-model="myModel" required></ng-form>');
        element.append($compile(nestedForm)($scope));
   }
})();

表单确实被注入DOM并且处于无效状态，在Chrome元素视图中，我看到了

<div dynamic-nested-form="" class="ng-scope">

    <ng-form 
        class="ng-pristine ng-scope ng-invalid ng-invalid-required">      
        <input ng-model="myModel" required="" 
               class="ng-pristine ng-untouched ng-invalid ng-invalid-required">
    </ng-form>
</div>

但外部形式不会失效。加载外部表单时，它看不到内部形式？

我做错了什么？

Answer 1

右，所以，基本上通过Angular进行了一些调试，只是嵌套表单无法找到外部表单控制器。（ngModelDirective）preLink中需要外部表单控制器

它无法找到它的原因是因为这个preLink在编译期间发生（显然，它是preLink）并且我的编译是在连接嵌套表单之前完成的。

所以作为一个解决方案，不是在附加之前编译，而是在之后执行，比如

var nestedForm  = angular.element('<ng-form><input ng-model="myModel" required></ng-form>');
$compile(element.append(nestedForm ).contents())($scope);

好吧，我想我正在重新编译它。

Anyhoo，这会让内部控件找到外形，我的问题就解决了。

AngularJS：以编程方式添加嵌套表单（ngForm）

1 个答案: