Controller reading component data

Question

My idea is to create a big form from separated components. So this is my main template:

<form novalidate>
    <div class="row">
        <user></user>
    </div>
    <button type="button" class="btn btn-default" ng-click="submit()"> Submit   </button>
</form>

and its controller (the template is binded from ui route config to the controller)

(function () {
    'use strict';

    angular.module('app')
        .controller('formCtrl', formCtrl);

    function formCtrl ($scope) {
        $scope.submit = function() {
            console.log("read data");
        }
    }      
})();

Now, the user component:

(function () {
    'use strict';

    var module = angular.module('app.user');

    module.component("user", {
        templateUrl: "app/user/user.html",
        controllerAs: "model",
        controller: function () {
            var model = this;
            model.user = {};            
        }
    });
})();

and the user template:

<form novalidate>
    <form-group>
        <label for="inputUser"> Name <label>
        <input ng-model="model.user.name" id="inputUser" type="text" placeholder="User"/>
    </form-group>
    <form-group>
        <label for="inputUser"> Email <label>
        <input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email"/>
    </form-group>
    <div>
        {{model.user | json}}
    </div>
</form>

Now I want to be able to read user data when the user do the submit. How can I do it?

lenilsondc · Accepted Answer · 2016-12-28 14:47:20Z

1

When using components, depending on the type of component (smart or dumb), you have to emit an output to the parent controller to handle such thing. But in this case, you can use ngModel to handle a model and change it on the parent from within the component. For example:

Working snippet:

angular.module('app', [])
  .controller('formCtrl', function($scope) {
    $scope.user = {};
    $scope.submit = function() {
      console.log($scope.user);
    }
  })
  .component("user", {
    bindings: {
      user: '=ngModel'
    },
    templateUrl: "app/user/user.html",
    controllerAs: "model",
    controller: function() {}
  });

angular.element(function() {
  angular.bootstrap(document, ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<form novalidate ng-controller="formCtrl">
  <div class="row">
    <user ng-model="user"></user>
  </div>
  <button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
</form>

<script type="text/ng-template" id="app/user/user.html">
  <form novalidate>
    <div>
      <label for="inputUser">Name
        <label>
          <input ng-model="model.user.name" id="inputUser" type="text" placeholder="User" />
    </div>
    <div>
      <label for="inputUser">Email
        <label>
          <input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email" />
    </div>
    <div>
      {{ model.user | json }}
    </div>
  </form>
</script>

edited Dec 28, 2016 at 14:47

answered Dec 28, 2016 at 14:17

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

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

4 Comments

FacundoGFlores Over a year ago

Excellent answer! Do you know any useful resource to deep into it?

lenilsondc Over a year ago

@FacundoGFlores actually it's a pretty shallow concept, there is no much for deeping into, it's basically about bindings, but I've seen this issue being discused with component directives instead of components directly, but the ideas are very similar (e.g., bennadel.com/blog/…)

FacundoGFlores Over a year ago

Yes, I saw it with directives, I thought components would have a particular angular-component way but it does not. And yes, it is all about bindings. Thank you for helping me

lenilsondc Over a year ago

@FacundoGFlores The most deep I can imagine is having access ngModelController to handle form validations and stuff like that, anyway, cheers :{D

FacundoGFlores · Accepted Answer · 2016-12-28 14:01:01Z

0

A possible solution would be $$childTail. So if I want to access to user:

$scope.$$childTail.model.user

answered Dec 28, 2016 at 14:01

FacundoGFlores

8,13812 gold badges68 silver badges97 bronze badges

Collectives™ on Stack Overflow

Controller reading component data

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related