Add directive dynamically when using angular-formly

Question

What would be the best way to add some directive, e.g. ng-focus-if conditionally to the form's input element when using angular-formly with custom templates?

I would like to use it like this:

$scope.formFields = [
  {
    key: 'email',
    type: 'input',
    templateOptions: {
      type: 'email',
      placeholder: 'Your E-Mail address',
      required: true,
      focusIf: 'some-expression' // <--- optional directive configuration here
    }
  }
];

The idea is to apply the directive only when configuration option is actually provided.

You'll want to look into ngModelAttrs. It's a bit complex, but by defining a custom type that has defines that as a defaultOption you can accomplish what you're looking for. Look at the UI Mask example. — kentcdodds
– kentcdodds, Commented Jan 12, 2016 at 4:45
Hello Kent! Thank you for pushing me in the right direction! Just wanted to tell you that Formly is truly awesome and very flexible. I love Angular, but forms was a huge pain for me all the time, now it all sorted out, thanks to you. I've created a JSBin with my ngFocusIf integration, feel free to edit it according to your needs and add it to the list of examples. Cheers! jsbin.com/vimayu/3/edit?html,js,output — Slava Fomin II
– Slava Fomin II, Commented Jan 12, 2016 at 17:14

aitnasser · Accepted Answer · 2016-01-12 08:14:51Z

3

You can combining angular-formly attributes with ng-focus-if attributes or any others custom attributes by using ngModelAttrs.

in your case your code should be like:

 $scope.formFields = [ {
        key: 'email',
        type: 'input',
         ngModelAttrs: {
              focusIf: {
                attribute: 'focus-if'   //directive declaration
              }
            },
        templateOptions: {
          type: 'email',
          placeholder: 'Your E-Mail address',
          focusIf: '', //directive default value
          required: true           
        }       
      }]

this is a working demo that can help you:

answered Jan 12, 2016 at 8:14

aitnasser

1,2661 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slava Fomin II · Accepted Answer · 2016-01-12 17:23:06Z

I've managed to figure out how to achieve the desired behavior, thanks to @kentcdodds and @aitnasser.

Just wanted to share the extended version here.

The idea is to use ngModelAttrs property when defining your type:

formlyConfigProvider.setType({
  name: 'input',
  template: '<input ng-model="model[options.key]">',
  defaultOptions: {
    ngModelAttrs: {
      focusIf: {
        attribute: 'focus-if'
      }
    }
  }
});

Make sure not to provide the default value for the focusIf. This will prevent addition of the directive on the input element by default.

And then set the required expression on your field:

$scope.formFields = [
 {
   key: 'email',
   type: 'input',
   templateOptions: {
     type: 'email',
     required: true,
     placeholder: 'E-Mail',
     focusIf: 'true' // Or any other Angular expression
   }
 }
];

Feel free to play with this JSBin.

Collectives™ on Stack Overflow

Add directive dynamically when using angular-formly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related