AngularJS: Fields added dynamically are not registered on FormController -

i have following static form in angularjs:

<form name="myform" class="form-horizontal">    <label>first name:</label>   <input type="text" name="first_name" ng-model="entity.first_name">    <label>last name:</label>   <input type="text" name="last_name" ng-model="entity.last_name">  </form> 

angular creates formcontroller me , publishes scope (under form name). means have access properties following:

$scope.myform.first_name.$error $scope.myform.last_name.$invalid ... 

this super useful!

but in case i'm building form dynamically, using directives:

<form name="myform" class="form-horizontal">    <field which="first_name"></field>   <field which="last_name"></field>  </form> 

the <field> directives don't resolve actual <input> elements until after while (after i've fetched data server, linked directives, etc.).

the problem here no field properties defined on form controller, if dynamic fields didn't register formcontroller:

// following properties undefined (but $scope.myform exists) $scope.myform.first_name $scope.myform.last_name 

any idea why? solution/workaround?

you can see entire code in jsfiddle:
http://jsfiddle.net/vincedo/3wcyv/

update 7/31/2015 has been fixed since 1.3, see here: https://github.com/angular/angular.js/issues/1404#issuecomment-125805732

original answer unfortunately short coming of angularjs @ moment. angular's form validation doesn't work dynamically named fields. can add following @ bottom of html see what's going on:

<pre>{{myform|json}}</pre> 

as can see, angular isn't getting dynamic input name right. there's work around involving nested forms can kind of nasty, work , (with little work) submit parent form without trouble.

if want, can go drum more support issue: github issue - dynamic element validation. either way, here's code:

http://jsfiddle.net/langdonx/6h8xx/2/

html:

<div data-ng-app>     <div data-ng-controller="mycontroller">         <form id="my_form" name="my_form" action="/echo/jsonp/" method="get">             <div data-ng-repeat="field in form.data.fields">                 <ng-form name="form">                     <label for="{{ field.name }}">{{ field.label }}:</label>                     <input type="text" id="{{ field.name }}" name="{{field.name}}" data-ng-model="field.data" required>                     <div class="validation_error" data-ng-show="form['\{\{field.name\}\}'].$error.required">can't empty.</div>                  </ng-form>             </div>             <input type="submit" />         </form>     </div> </div> 

javascript:

mycontroller.$inject = ["$scope"];  function mycontroller($scope) {     $scope.form = {};     $scope.form.data = {};     $scope.form.data.fields = []      var f1 = {         "name": "input_1",         "label": "my label 1",         "data": ""     };     var f2 = {         "name": "input_2",         "label": "my label 2",         "data": ""     };      $scope.form.data.fields.push(f1);     $scope.form.data.fields.push(f2); }