Access form during component initialization in angularjs - angularjs

Question

I have a component as following :
.component('myLink', {
bindings: {
linkEntity: '=',
constraints: '=?',
fieldName: '#',
standalone: '#',
adherence: '#',
searchMinLength: '<',
searchHandler: '&',
viewItemHandler: '&',
onSelectItemHandler: '&',
hiddenFields: '#',
formName: '#',
date: '<?',
constraintsJson: '#'
},
require: {
parent: '?^form'
},
templateUrl: 'my-link-component.html',
controller: 'MyLinkController',
controllerAs: 'slink'
});
The template url :
<ng-form name="{{slink.linkFormName}}">
<fieldset class="link-fieldset">
<legend>
<md-icon>link</md-icon>
</legend>
<div layout="row" flex ng-if="slink.isFormLoaded">
<md-button print-remove ng-if="!slink.constraints.readOnly" ng-click="slink.querySearch(' ')" class="md-icon-button md-primary">
<md-icon aria-label="Tout voir">view_headline</md-icon>
<md-tooltip md-direction="right">Afficher toute la liste de : {{slink.uiName | lowercase}}</md-tooltip>
</md-button>
<md-autocomplete flex ng-disabled="slink.constraints.readOnly" md-selected-item="slink.selectedItem" md-search-text="slink.searchText" md-selected-item-change="slink.changeItem(item)" md-items="item in slink.querySearch(slink.searchText)" md-min-length="1" md-no-cache="slink.noCache" md-select-on-match=true md-autoselect=true md-item-text="slink.itemToText(item)" md-input-name="{{slink.property}}" md-input-id="simple-link-component-{{slink.property}}-{{slink.autoId}}-input" md-floating-label="{{slink.floatingLabel}}" md-select-on-focus style="background: none;">
<md-item-template>
<span md-highlight-text="slink.searchText === ' ' ? slink.itemToText(slink.selectedItemStore) : slink.searchText" md-highlight-flags="^i">
{{item.domainObjectDescription}}
</span>
</md-item-template>
<md-not-found>
<div style="width: 100%;">{{slink.notFoundMsg}}
</div>
</md-not-found>
<div ng-messages="slink.errorMessage" ng-if="!slink.constraints.readOnly">
<div ng-messages-include='messages/messages.html'></div>
</div>
</md-autocomplete>
<md-button print-remove ng-if="slink.standalone !== 'list' && !slink.constraints.readOnly" ng-disabled="!slink.selectedItem" class="md-icon-button md-primary" ng-click="slink.viewItem()">
<md-icon aria-label="Voir le détail">visibility</md-icon>
<md-tooltip md-direction="left">Voir le détail de : {{slink.uiName | lowercase}}</md-tooltip>
</md-button>
</div>
</fieldset>
</ng-form>
In the controller I'm trying to access the form as following :
function onInitComponent() {
//...
console.log($scope[slink.linkFormName]);
//...
}
But I always get undefined.
In the other hand, from the changeItem function, which triggers after I made a change on the component it's defined.
How can I access my form when I initilize my component ?

Answer 1

As discussed in this thread you can use $postLink() lifecycle hook to initially access your form in your components controller, since it is called after this controller's element and its children have been linked so we can be sure the form was initialized. See the example below:
(function (angular) {
'use strict';
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
this.id = 1;
}]);
})(angular);
(function (window, angular) {
'use strict';
var myLink = {
bindings: {
id: '<',
linkFormName: '#'
},
templateUrl: 'my-link-component.tmpl.html',
controller: 'MyLinkController',
controllerAs: 'slink'
};
angular.module('myApp')
.component('myLink', myLink);
})(window, angular);
(function (angular) {
'use strict';
angular
.module('myApp')
.controller('MyLinkController', MyLinkController);
MyLinkController.$inject = ['$scope'];
function MyLinkController($scope) {
var slink = this;
//component lifecycle hooks
slink.$onInit = onInit;
slink.$postLink = postLink;
function onInit() {
console.log('onInit: ', $scope[slink.linkFormName]);
}
function postLink() {
console.log('postLink: ',$scope[slink.linkFormName]);
}
}
})(angular);
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as myCtrl">
<my-link id="myCtrl.id" link-form-name='myLinkForm'></my-link>
</div>
<script type="text/ng-template" id="my-link-component.tmpl.html">
<ng-form name="{{slink.linkFormName}}">
<fieldset class="link-fieldset">
<legend>
<md-icon>link</md-icon>
</legend>
</fieldset>
</ng-form>
</script>
</div>