如何使用form。$ addControl（）

Question

I am using Angular 1.0.8. How do you correctly add compiled form elements? I assume it has to do with how to use $addControl?

Consider this example: http://jsfiddle.net/lesouthern/LB4Tx/

After adding the select in this example, the form becomes valid only if "myInput" is entered, it does not recognize the "required" directive with the appended select.

<div ng-app="pageModule"
    ng-controller="parentCtrl">
    <script type="text/ng-template" id="myTemplate">
        <select name="mySelect"
            add-to-form
            ng-model="val"
            required
            ng-options="o.id as o.name for o in options">
            <option value="">Select my option...</option>
        </select>
    </script>
    <form name="myForm"
        id="myForm"
        novalidate
        ng-submit="mySubmit()">
        <input name="myInput"
            ng-model="myInput"
            required />
        <div id="dest"></div>
        <button type="submit">Click me to submit</button>
        {{myForm.$invalid}}
    </form>
    <button ng-click="mkSelect()">create select</button>
</div>



var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope,$compile) {
    $scope.options = [
        { id : "nissan", name: "Nissan" },
        { id : "toyota", name: "Toyota" },
        { id : "fiat"  , name: "Fiat" },
        { id : "chevy", name: "Chevy" },
        { id : "honda", name: "Honda" },
        { id : "gmc"  , name: "GMC" }
    ];
    $scope.mkSelect = function() {
        var dest = angular.element(document.getElementById('dest')),
            html = angular.element(document.getElementById('myTemplate')).html().trim();
        dest.append($compile(html)($scope));
    }
    $scope.mySubmit = function() {
        console.log('this is my submit');
    }
})
.directive('addToForm',function() {
    return {
        require : ['ngModel'],
        controller : function() {},
        link : function($scope,$element,$attr,$ctrls) {
            var modelCtrl = $ctrls[0];
            $scope.myForm.$addControl(modelCtrl);
        }
    }
});

Answer 1

form.$addControl() was unnecessary. I corrected my compile command and the appended element now is registering with the form controller: http://jsfiddle.net/lesouthern/8CDNc/

$scope.mkSelect = function() {
        var dest = angular.element(document.getElementById('dest')),
            html = angular.element(document.getElementById('myTemplate')).html().trim();
        $compile(html)($scope,function(_element,_scope) {
            dest.append(_element);
        });
    }

Answer 2

In case you didn't need to $compile your html, you can use the ng-show directive to hide the <select> until needed. Notice it is still required JSFiddle with no $compile

---

<form>
  ...
  <select name="mySelect" id="multipleSelect" ng-show="mkSelected"
           ng-model="data.singleSelect" required>
  <button type="submit">Click me to submit</button>
</form>
<button ng-click="mkSelected=true">Create Select</button>