Angular: Empty Fiddle

http://angularjs.org/

by peduarte

HTML

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-controller="MyCtrl">

    <form name="myForm">
       
        <p ng-repeat="field in formFields">
            <input
                type="{{field.type}}"
                name="{{field.name}}"
                placeholder="{{ field.name }}"
                ng-model="field.value"
                required
            >
        </p>

        <code class="ie">
            myForm.FirstName.$valid = {{ myForm.email.$valid }}
        </code>            
            
        <code class="ie">
            myForm.$valid = {{ myForm.$valid }}
        </code>
        
        <hr>   
            
        <h3>PROBLEM:</h3>
        <p>When the <strong>field name</strong> is an Angular expression (<code>type=&quot;{{ name.name } }&quot;</code>), <code>myForm.email.$valid</code> never returns <code>true</code> or <code>false</code>.</p>
        <p>This makes it impossible for me to validate the email field.</p>
        <p>The form is built dynamically so I can't hardcode the name attribute.</p>
            
    </form>
        
        

            
    </form>
    
</div>

CSS

.ie { display: block; margin: 0 0 20px; }

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.formFields = [
        {
            name: 'firstName',
            type: 'text'
        },
        {
            name: 'email',
            type: 'email'
        }
    ];
    
}