CODEWITHSUNDEEP
javascriptangularjs
Moussa
Moussa

Reputation: 4154

Angular 1.5 component with ng-model

Is it possible to use ng-model with a component? I would like to bind a scope variable to a component with ng-model. I have plunkered my issue. I would like the component my-input to be binded to the variable from the scope userData.name.

I am using Angular JS 1.5.6 components, and want to avoid using directive.

<body ng-controller="MyCtrl">
  <div class="container">
    <h2>My form with component</h2>
    <form role="form">
      <div class="form-group">
        <label>First name</label>
        <my-input placeholder="Enter first name" ng-model="userData.name"></my-input>
      </div>
    </form>
  </div>
</body>

Upvotes: 27

Views: 20965

Answers (2)

jcubic
jcubic

Reputation: 66650

You can use this code:

function myInputController($scope) {
    var self = this;
    this.$onInit = () => {
        this.ngModel.$render = () => {
            self.model = self.ngModel.$viewValue;
        };
        $scope.$watch(function() { return self.model; }, function(value) {
            self.ngModel.$setViewValue(value);
        });
    };
}
module.component('myInput', {
    require: {
        ngModel: '^ngModel'
    },
    template: '<input ng-model="vm.model"/>',
    controller: myInputController,
    controllerAs: 'vm'
};

Upvotes: 39

masitko
masitko

Reputation: 609

I've fixed the plunker for you.

Names of you parameters have to correspond to the names in your component. You should be using camelCased names in your component and kebab-cased in your templates. Example:

  bindings: {
      myPlaceholder: '@',
      myModel:'='
    }

 <my-input my-placeholder="Enter first name" my-model="userData.firstName">

Regarding your question about using ng-model - you can use any parameter as far you define it in your component. In this case the name of your parameter should be ngModel.

Upvotes: 14

Related Questions