fix(NgForm): always return the first matching control when using map notation on a NgForm instance

Author: matsko

lib/directive/ng_control.dart

@@ -26,7 +26,7 @@ abstract class NgControl implements NgDetachAware {
 
   final Map<String, List<NgControl>> errors   = new Map<String, List<NgControl>>();
   final List<NgControl> _controls             = new List<NgControl>();
-  final Map<String, NgControl> _controlByName = new Map<String, NgControl>();
+  final Map<String, List<NgControl>> _controlByName = new Map<String, List<NgControl>>();
 
   NgControl(Scope this._scope, dom.Element this._element, Injector injector,
       NgAnimate this._animate)
@@ -144,7 +144,7 @@ abstract class NgControl implements NgDetachAware {
   addControl(NgControl control) {
     _controls.add(control);
     if (control.name != null) {
-      _controlByName[control.name] = control;
+      _controlByName.putIfAbsent(control.name, () => new List<NgControl>()).add(control);
     }
   }
 
@@ -157,8 +157,12 @@ abstract class NgControl implements NgDetachAware {
    */
   removeControl(NgControl control) {
     _controls.remove(control);
-    if (control.name != null) {
-      _controlByName.remove(control.name);
+    String key = control.name;
+    if (key != null && _controlByName.containsKey(key)) {
+      _controlByName[key].remove(control);
+      if (_controlByName[key].isEmpty) {
+        _controlByName.remove(key);
+      }
     }
   }
 

lib/directive/ng_form.dart

@@ -57,7 +57,11 @@ class NgForm extends NgControl {
     }
   }
 
-  NgControl operator[](name) => _controlByName[name];
+  NgControl operator[](name) {
+    if (_controlByName.containsKey(name)) {
+      return _controlByName[name][0];
+    }
+  }
 }
 
 class NgNullForm extends NgNullControl implements NgForm {

test/directive/ng_form_spec.dart

@@ -20,6 +20,26 @@ void main() {
       expect(form.name).toEqual('myForm');
     }));
 
+    it('should return the first control with the given name when accessed using map notation',
+      inject((Scope scope, TestBed _) {
+
+      var element = $('<form name="myForm">' +
+                      '  <input type="text" name="model" ng-model="modelOne" probe="a" />' +
+                      '  <input type="text" name="model" ng-model="modelTwo" probe="b" />' +
+                      '</form>');
+
+      _.compile(element);
+      scope.apply();
+
+      NgForm form = _.rootScope.context['myForm'];
+      NgModel one = _.rootScope.context['a'].directive(NgModel);
+      NgModel two = _.rootScope.context['b'].directive(NgModel);
+
+      expect(one).not.toBe(two);
+      expect(form['model']).toBe(one);
+      expect(scope.eval("myForm['model']")).toBe(one);
+    }));
+
     describe('pristine / dirty', () {
       it('should be set to pristine by default', inject((Scope scope, TestBed _) {
         var element = $('<form name="myForm"></form>');