feat(fieldConfig): Add ngModelElAttrs

Add a simpler way to add attributes to the ng-model element dynamically

closes #378

Author: Kent C. Dodds

src/providers/formlyApiCheck.js

@@ -133,6 +133,7 @@ const fieldOptionsApiShape = {
   noFormControl: apiCheck.bool.optional,
   hide: apiCheck.bool.optional,
   hideExpression: formlyExpression.optional,
+  ngModelElAttrs: apiCheck.objectOf(apiCheck.string).optional,
   ngModelAttrs: apiCheck.objectOf(apiCheck.shape({
     expression: apiCheck.shape.ifNot(['value', 'attribute', 'bound'], apiCheck.any).optional,
     value: apiCheck.shape.ifNot('expression', apiCheck.any).optional,

src/run/formlyNgModelAttrsManipulator.js

@@ -29,6 +29,7 @@ function addFormlyNgModelAttrsManipulator(formlyConfig, $interpolate, formlyWarn
     addValidation();
     addModelOptions();
     addTemplateOptionsAttrs();
+    addNgModelElAttrs();
 
 
     return node.innerHTML;
@@ -117,6 +118,12 @@ function addFormlyNgModelAttrsManipulator(formlyConfig, $interpolate, formlyWarn
         }
       });
     }
+
+    function addNgModelElAttrs() {
+      angular.forEach(options.ngModelElAttrs, (val, name) => {
+        addIfNotPresent(modelNodes, name, val);
+      });
+    }
   }
 
   // Utility functions

src/run/formlyNgModelAttrsManipulator.test.js

@@ -316,6 +316,43 @@ describe('formlyNgModelAttrsManipulator', () => {
   });
 
 
+  describe(`ngModelElAttrs`, () => {
+
+    it(`should place the attributes you specify on the ng-model element`, () => {
+      _.assign(field, {
+        ngModelElAttrs: {foo: '{{::to.bar}}'}
+      });
+      manipulate();
+      expect(
+        resultNode.getAttribute('foo'),
+        'foo attribute should equal the value of foo in ngModelElAttrs'
+      ).to.equal('{{::to.bar}}');
+    });
+
+    it(`should work with multiple ng-models`, () => {
+      _.assign(field, {
+        ngModelElAttrs: {foo: '{{::to.bar}}'}
+      });
+      manipulate(`
+        <div>
+          <input class="first" ng-model="foo" />
+          <input class="second" ng-model="bar" />
+        </div>
+      `);
+      expect(
+        resultNode.querySelector('.first').getAttribute('foo'),
+        'foo attribute should equal the value of foo in ngModelElAttrs'
+      ).to.equal('{{::to.bar}}');
+      expect(
+        resultNode.querySelector('.second').getAttribute('foo'),
+        'foo attribute should equal the value of foo in ngModelElAttrs'
+      ).to.equal('{{::to.bar}}');
+
+    });
+  });
+
+
+
   function manipulate(theTemplate = template) {
     result = manipulator(theTemplate, field, scope);
     resultEl = angular.element(result);