ngModelAttrsTemplateManipulator

👍

This is probably one of the coolest parts of angular-formly!

There is a built-in templateManipulator that automatically adds attributes to the ng-model element(s) of your templates for you. This is what makes creating type templates so insanely easy. It also makes angular-formly perform much better than you would normally get because it allows you to not have unnecessary/unused directives.

This built-in manipulator is pretty powerful/magical. Here's what you need to know about it:

• It will never override existing attributes (except one exception noted below).
• To prevent it from running on your field, simply set data: {skipNgModelAttrsManipulator: true} and this template manipulator will skip that field (I have yet to find a use case for this)
• This can be disabled globally by setting formlyConfigProvider.extras.disableNgModelAttrsManipulator = true (I have yet to find a use case for this)
• It wont do anything to the template if it can't find any elements with the attribute ng-model.
• It adds a name and id attribute (the scope.id for both of them)
• It adds the formly-custom-validation directive if the field has options.validators
• It adds ng-model-options directive if the field has options.modelOptions
• If you specify options.modelOptions.getterSetter = true then it will replace the ng-model attribute with options.value which is a getterSetter function that formly attaches to your field options.
• It utilizes the ngModelAttrs api to add a bunch of attributes automagically. This is probably one of the coolest things about angular-formly. See below for examples of how to use this.

{
  templateOptions: {
    placeholder: 'This will be automagically added',
    required: true, // will add a required attribute
    maxlength: 6, // this would add a maxlength attribute, but see expressionProperties
    onBlur: 'options.data.hasBeenBlurred = true' // this adds ng-blur
  },
  expressionProperties: {
    'templateOptions.maxlength': 'someExpression' // this adds the ng-maxlength attribute
  }
}

This is incredibly powerful because it makes the templates require much less bloat AND it allows you to avoid paying the cost of watchers that you'd never use (like a field that will never be required for example).

Here are the built-in supported attributes

• both attribute or regular attribute: required, disabled, pattern, maxlength, and minlength
• attribute only: placeholder, min, max, tabindex, and type
• expression types: onChange, onKeydown, onKeyup, onKeypress, onClick, onFocus, and onBlur

You can add more custom attributes using the ngModelAttrs property on a field. It's a little complex, but quite powerful.