CODEWITHSUNDEEP
javascriptangularjs
Moussa
Moussa

Reputation: 4154

Angular JS data binding in component is not working

I am using Angular JS 1.5.6 components to build dynamically a form. The hierarchy is the following : index.html calls component my-view which calls component my-form which calls unitary components like inputs and button.

The issue is that the data binding is not working because any modification in input components is not taken into account into my-view component.

Besides I have a weird behavior, each time I update input value, a call is made to view component function.

I have plunkered this, the submit button triggers console.log (so need to open firebug to see it in action).

Here is my index.html

<body ng-app="MyApp">
  <my-view></my-view>
</body>

Here is myView.html

<div class="container">
  <h2>With component myform</h2>
  <my-form form-elements="
    [{type:'input', label:'First name', placeholder:'Enter first name',model:$ctrl.userData.firstName, id:'firstName'},
    {type:'input', label:'Last name', placeholder:'Enter last name',model:$ctrl.userData.lastName, id:'lastName'},
    {type:'button', label:'Submit', click:$ctrl.click()}]"></my-form>
</div>

<div class="container">
  <h2>Check data binding</h2>
  <label>{{$ctrl.userData.firstName}}</label>
  <label>{{$ctrl.userData.lastName}}</label>
</div>

Here is myView.js

(function() {
  'use strict';

  angular.module('MyApp').component('myView', {
    templateUrl: 'myView.html',
    controller: MyViewController,
    bindings: {
      viewFormElements: '<'
    }
  });

  function MyViewController() {
    this.userData = {
      firstName: 'François',
      lastName: 'Xavier'
    };

    function click() {
      console.log("Hello " + this.userData.firstName + " " + this.userData.lastName);
    }

    this.click = click;
  }

})();

Upvotes: 1

Views: 688

Answers (1)

Moussa
Moussa

Reputation: 4154

I manage to solve my issue with 2 way binding and by putting form-element in an object instead of putting it directly in the view ($ctrl.formElements). It is on plunker.

myView.html 

<div class="container">
    <h2>With component myform</h2>
    <my-form form-elements=$ctrl.formElements></my-form>
  </div>
  <div class="container">
    <h2>Check data binding</h2>
    <label>{{$ctrl.formElements}}</label><br />
 </div>'

Upvotes: 1

Related Questions