Creating an Angular 1.5 component that utilizes ng-model

Question

Creating an Angular 1.5 component that utilizes ng-model

Can ng-model be used with a component in Angular JS 1.5.6? I am trying to bind a scope variable to a component using ng-model. If you'd like to see my issue, check out my Plunker. Specifically, I want the component "my-input" to be bound to the userData.name variable from the scope.

I am working with Angular JS 1.5.6 components and prefer not to use directives.

<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>

javascript angularjs

Answer 1

Answer №1

Here is the code snippet you can utilize:

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

Answer 2

Here is the code snippet you can utilize:

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

Answer 3

Answer №2

I have updated the Plunker for your convenience.

Make sure that the names of your parameters match the names in your component. Use camelCased names in your component and kebab-cased names in your templates. For example:

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

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

In response to your question about using ng-model - you can use any parameter as long as you define it in your component. In this case, the parameter should be named ngModel.

Answer 4

I have updated the Plunker for your convenience.

Make sure that the names of your parameters match the names in your component. Use camelCased names in your component and kebab-cased names in your templates. For example:

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

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

In response to your question about using ng-model - you can use any parameter as long as you define it in your component. In this case, the parameter should be named ngModel.

Creating an Angular 1.5 component that utilizes ng-model

Answer №1

Answer №2

Similar questions

Having trouble integrating VueX store and router into Mocha tests

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

What is the best way to retrieve variables from child components within a parent component in React?

Utilizing CORS domain cookies in an AngularJS and Spring Boot collaboration application

Web API - Unable to retrieve resource: the server returned a status code of 404

Understanding the functionality of app.listen() and app.get() in the context of Express and Hapi

Flatpickr will refresh the list of days once a day is selected, causing any modifications made using onDayCreate to be reverted

Determine the scrolling progress within a DOM element

ExpressJS looping back

What's the best way in Angular 6 to set focus on an element that's being made content editable?

How can I retrieve the chosen value of JQuery Chosen from the backend?

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

Challenges encountered when creating scenarios using Protractor

Utilizing Bootstrap Modal to Upload an Image

Is it possible for a web server to transmit information without being prompted by the client?

What is the process for capturing a window screenshot using Node.js?

Having trouble locating the 'EJS' Typescript for the Express framework

Leverage TypeScript Enum along with PropTypes to declare the properties of a React component

Preserving data in input fields even after a page is refreshed

Organizing Angular project folders with the help of Node.js and Jade