FormController: attach to component controller? #13991

royaldark · 2016-02-10T07:05:45Z

The new component support in 1.5 is great, but it seems to interact badly with FormController. With a very simple component like such:

someModule.component('customComponent', {
  template: '<form name="$ctrl.form">Is form valid? {{ $ctrl.form.$valid }}</form>',
  controller: ['$scope', function($scope) {
    this.$onInit = function() {
      console.log("FormController:");
      console.log(this.form);
    };
  }]
});

all seems well on-screen, as it will correctly show Is form valid? true. However, the console.log in the customComponent controller can't find the FormController that should be bound to it via name="$ctrl.form". I also checked $scope.form and $scope.$ctrl.form to make sure it wasn't a this-binding issue, but no luck.

Here is a Plunker showing the issue in action: http://plnkr.co/edit/P8gKwz6koHeoXRHdhoGl

Am I missing something obvious?

The text was updated successfully, but these errors were encountered:

gkalpak · 2016-02-10T07:29:45Z

The only guarantee for the $onInit hook is that the required controllers will be available. The FormController you are trying to access is not required and it uses a different mechanism, so I am afraid you are "stuck" with using a post-link function for grabbing that (or try to access it asynchronously if you know your template doesn't load any partial from the server).

Maybe we could add an $afterViewInit hook or something, that would be called after the post-linking phase.

@petebacondarwin, wdyt ?

jonricaurte · 2016-02-10T08:26:44Z

@gkalpak That would be awesome if you could add an $afterViewInit hook after post linking. I think after seeing more of 1.5, people are going to be requesting more hooks that are included in angular 2 because it is easier to manage your code in the controller vs in a directive especially if you are using ES2015 which make writing elaborate directives more of pain and would ease the transition to angular 2 even further.

Narretz · 2016-02-10T09:37:03Z

The form is also set on the scope - there's no way (yet) to attach it to the controller.

gkalpak · 2016-02-10T10:30:15Z

(Not that it's related to the lifecycle hook, but) it is possible by using name="$ctrl.form" (as in OP's example), since $ctrl is just a reference to the controller on the scope.

The important thing about the hook is that it will be called after everything is set (either on the scope or on the controller), so the user doesn't try to access properties that don't yet exist.

Narretz · 2016-02-10T10:46:24Z

Oh, yes, obviously. Thanks for correcting that.

petebacondarwin · 2016-02-10T12:49:36Z

Sounds interesting. Is that a hook in A2? What are its exact semantics? Does someone want to knock up a PR?

gkalpak · 2016-02-10T15:43:09Z

Yes, it's a hook in ng2. I'm not sure about the exact semantics (and I didn't dive into the code, since the semantics won't much ng1 semantics 1-to-1), but from the description of it it sounds similar to right after ng1's post-linking.

The ng2 docs on lifecycle hooks is still WIP, but here is demo plnkr they link to as an example, that showcases (almost) all hooks: http://plnkr.co/edit/?p=preview

royaldark · 2016-02-10T17:58:58Z

That Plunker link doesn't work - I believe the right one is https://angular.io/resources/live-examples/lifecycle-hooks/ts/plnkr.html

gkalpak · 2016-02-10T19:57:35Z

@royaldark, yes, that's the one ! Thx 👍

drpicox · 2016-03-05T10:25:54Z

This can be seen as specific case/alias for asDirective #14080. Still have the issue with the hook.

This change adds in the following new lifecycle hooks, which map in some way to those in Angular 2: * `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form `{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value. * `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers. * `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation. Note that child elements that contain `templateUrl` directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs. Closes angular#14127 Closes angular#14030 Closes angular#14020 Closes angular#13991

This change adds in the following new lifecycle hooks, which map in some way to those in Angular 2: * `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form `{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value. * `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers. * `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation. Note that child elements that contain `templateUrl` directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs. Closes angular#14127 Closes angular#14030 Closes angular#14020 Closes angular#13991 Closes angular#14302

This change adds in the following new lifecycle hooks, which map in some way to those in Angular 2: * `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form `{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value. * `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers. * `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation. Note that child elements that contain `templateUrl` directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs. Closes angular#14127 Closes angular#14030 Closes angular#14020 Closes angular#13991 Closes angular#14302

This change adds in the following new lifecycle hooks, which map in some way to those in Angular 2: * `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form `{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value. * `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers. * `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation. Note that child elements that contain `templateUrl` directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs. Closes #14127 Closes #14030 Closes #14020 Closes #13991 Closes #14302

sumeet-sethi · 2017-03-31T01:57:38Z

I am using angular 1.5.11 with es6 and I am still facing with the issue of FormController not being available in components controller. I see this issue is closed, so what's the solution here?

royaldark · 2017-03-31T04:16:17Z

@setry14 You can use the $postLink lifecycle hook added in 1.5.3.

sumeet-sethi · 2017-03-31T16:12:59Z

Turns out I was calling my component (which has its own <form></form>) within the <form></form> of the calling template. That messed up the components <form></form>. Moving component form outside parents form made it dance! No need for $postLink, components FormController now just shows up on this.$scope.

Narretz added the type: feature label Feb 11, 2016

Narretz added this to the Ice Box milestone Feb 11, 2016

Narretz added component: $compile severity: inconvenient labels Feb 11, 2016

gkalpak mentioned this issue Feb 13, 2016

Implement lifecycle hooks for directive/component controllers (ng2-style) #14030

Closed

9 tasks

drpicox mentioned this issue Mar 5, 2016

feat(ngAsDirective): new as directive to publish component controllers into current scope #14080

Closed

3 tasks

petebacondarwin mentioned this issue Mar 22, 2016

feat($compile): add more lifecycle hooks to directive controllers #14302

Merged

3 tasks

petebacondarwin closed this as completed in #14302 Mar 25, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormController: attach to component controller? #13991

FormController: attach to component controller? #13991

royaldark commented Feb 10, 2016

gkalpak commented Feb 10, 2016 •

edited

Loading

jonricaurte commented Feb 10, 2016

Narretz commented Feb 10, 2016

gkalpak commented Feb 10, 2016

Narretz commented Feb 10, 2016

petebacondarwin commented Feb 10, 2016

gkalpak commented Feb 10, 2016

royaldark commented Feb 10, 2016

gkalpak commented Feb 10, 2016

drpicox commented Mar 5, 2016

sumeet-sethi commented Mar 31, 2017

royaldark commented Mar 31, 2017

sumeet-sethi commented Mar 31, 2017 •

edited

Loading

FormController: attach to component controller? #13991

FormController: attach to component controller? #13991

Comments

royaldark commented Feb 10, 2016

gkalpak commented Feb 10, 2016 • edited Loading

jonricaurte commented Feb 10, 2016

Narretz commented Feb 10, 2016

gkalpak commented Feb 10, 2016

Narretz commented Feb 10, 2016

petebacondarwin commented Feb 10, 2016

gkalpak commented Feb 10, 2016

royaldark commented Feb 10, 2016

gkalpak commented Feb 10, 2016

drpicox commented Mar 5, 2016

sumeet-sethi commented Mar 31, 2017

royaldark commented Mar 31, 2017

sumeet-sethi commented Mar 31, 2017 • edited Loading

gkalpak commented Feb 10, 2016 •

edited

Loading

sumeet-sethi commented Mar 31, 2017 •

edited

Loading