ngModelAttrsTemplateManipulator
One of the coolest parts of angular-formly
This is probably one of the coolest parts of angular-formly!
There is a built-in
templateManipulator
that automatically adds attributes to theng-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
andid
attribute (thescope.id
for both of them) - It adds the
formly-custom-validation
directive if the field hasoptions.validators
- It adds
ng-model-options
directive if the field hasoptions.modelOptions
- If you specify
options.modelOptions.getterSetter = true
then it will replace theng-model
attribute withoptions.value
which is agetterSetter
function that formly attaches to your fieldoptions
. - 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):
- By setting
formlyConfig.extras.disableNgModelAttrsManipulator
totrue
(will disable it globally. Not recommended) - By setting the field's
data.skipNgModelAttrsManipulator
property totrue
(will prevent it from running on that field's template entirely) - By setting the field's
data.skipNgModelAttrsManipulator
property to a css selector (will prevent it from running on anyng-model
elements that match the given selector). - By adding the attribute
formly-skip-ng-model-attrs-manipulator
to theng-model
element in your template (will skip only that element).
Updated less than a minute ago