angularjs - 角JS。动态添加的输入不会影响 $valid

Question

试图制作一个动态组合的表单。

字段和属性来自服务器。Angular 应该获取它们并生成一个表单。

我决定使用指令和运行时编译。

除了少数几件事外，大多数情况下都有效。

问题： $valid 未定义编译字段。

对于静态字段是有效的。

请给我一个建议。

app = angular.module('dyno', []);

    app.controller("fieldCompilation", function($scope) {

      $scope.list = [{
          id: "0",
          name: "A"
        },
        {
          id: "1",
          name: "B"
        },
        {
          id: "2",
          name: "C"
        },
      ];


    });
    app.directive("otcDynamic", function($compile) {
      return {
        link: function(scope, element) {
          // Add Text Input with pattern validation and required attr
          var template = "<input type='text' name='input3' ng-model='input3' placeholder='input3 [0-9]{2} required' pattern='[0-9]{2}' required='true'/>";
          var linkFn = $compile(template);
          var content = linkFn(scope);
          angular.element(document.getElementById("f3")).append(content);

        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <div ng-app="dyno">
      <div ng-controller="fieldCompilation">

        <br><b> Static Input:</b>
        <ng-form name="form1">
          <div id="f1">
            1. Input <input type='text' name='input1' ng-model='input1' placeholder='input1 [0-9]{2} required' pattern='[0-9]{2}' required='true' /><br>

          </div>
          <br><b> Dynamic Inputs:</b>
          <div otc-dynamic>
            <div id="f3">
              3. Input
            </div>
          </div>
          <br> <b>Details</b>
          <div>
            Counter: {{ message }}
          </div>
          <div>
            Model Input1: {{ input1 }}
          </div>
          <div>
            Model input3: {{ input3 }}
          </div>
          <div>
            Validation input1: {{ form1.input1.$valid }}<br> Validation input3: {{ form1.input3.$valid }}<br> Validation form1: {{ form1.$valid }}<br>
          </div>

        </ng-form>

      </div>

    </div>

小提琴

标签： angularjs