Pass ngModel to AngularJS Component

Question

I'm trying to create a custom form component which I can use ng-model to bind with. I've found loads of tutorials on how to do this with directives, but I can't seem to figure out how to do it with components as you can't have link functions with components, and trying to pass in the ngModel dependency to the controller results in this error:

Error: [$injector:unpr] Unknown provider: $ngModelProvider <- $ngModel

I've also seen this and tried this:

bindings: {
    value: "=ngModel"
}

I tried that, and then setting value in the controller for two way binding, but it doesn't seem to work.

Todd Palmer · Accepted Answer · 2016-12-12 03:27:59Z

1

This is a common misunderstanding with Components in Angular. Components should not modify data outside of their own scope. So, if you want to do this, you really should use a Directive.

Here is a quote from the documentation :

Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in Angular it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.

answered Dec 12, 2016 at 3:27

Todd Palmer

1,10210 silver badges20 bronze badges

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

4 Comments

Brian Over a year ago

Interesting. So are you saying components should never use ngModel for outputting results? I don't see that as being much different then a 2-way binding, which is allowed. (although yes 2 way binding should also be used sparingly)

Todd Palmer Over a year ago

Well, I am quoting the docs. But, it is true that you can modify an an object using two way binding in a Component. But, you can't replace the object. And, the docs seem to imply that this was not the intended way to use components. Plus, if you really want to do that, just use a directive and you know exactly what you are getting.

Incinirate Over a year ago

So when creating form elements, it's not possible to make them as components, and they must be created as plain directives? I feel like that's kind of the point of components is to be able to create elements "that [are] similar to ... Web Components." And as such, it shouldn't be necessary to create directives to provide an interface to the form element's data. Components should be able to export their data in some way. Oh well...

Disfigure Over a year ago

In principle I agree with the quote. An exemple, a component <input-text ng-model="vm.value"></input-text> can be implemented to avoid redundant html code, validation message and much more. It can still be used with other ng directive which allows us to have simple validation implementation.

Brian · Accepted Answer · 2016-12-14 02:26:22Z

I think the angular-recommended way of doing callbacks (like ngclick for example) is to use the method binding type: &

Here is a plunkr example: https://plnkr.co/edit/nySL4OoMpJPkGXX8j78U?p=preview

Note this part, the method binding type is defines, and the internalChange function executes whatever angular expression is provided by the parent/caller.

  bindings: {
      valueChanged: '&?'
  }, 
  controller: function() {
      this.$onInit = function() {
          this.value = 'initial value';
      };
      this.internalChange = function() {
          if (this.valueChanged) {
              this.valueChanged({ $value: this.value} );
          }
      };  
  }

And then here are 2 ways of many to use the expressions, note $value as defined by the component.

<my-comp data-value-changed="$ctrl.someFunction($value)"></my-comp> <br 
<my-comp data-value-changed="$ctrl.someProperty = 'Bla: ' + $value"></my-comp>

I tried to set it up to show a variety of things.

The method binding takes an angular expression. I have 2 examples, one calling a function on the parent controller, the other setting a property
This expression is executed with the scope of the parent/caller (ie: has access to parent controller properties, functions etc...)
The component is the one who invokes it by executing the binding name as a function
The component can provide a map of key/value, where the key is a named property that can be used by the caller ($value in my example)

This is a good solution so long as you are OK with the component doing "push" updates to the parent. If for example you only wanted to fetch the data from the component at a specific time (possibly due to time or memory constraints), than there are many other different solutions for that problem.

Hope this helps!

Collectives™ on Stack Overflow

Pass ngModel to AngularJS Component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related