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).
• 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.

Disabling

There are four ways you can prevent this manipulator from running for your field's ng-model element(s):

1. By setting formlyConfig.extras.disableNgModelAttrsManipulator to true (will disable it globally. Not recommended)
2. By setting the field's extras.skipNgModelAttrsManipulator property to true (will prevent it from running on that field's template entirely)
3. By setting the field's extras.skipNgModelAttrsManipulator property to a css selector (will prevent it from running on any ng-model elements that match the given selector).
4. By adding the attribute formly-skip-ng-model-attrs-manipulator to the ng-model element in your template (will skip only that element).