How to set a dynamic name in ng-form
<p>I have a component with a ng-form. I want to set the ng-form name dynamically so I outside the component the people can access easily to the ng-form value.</p>

<p>Example:</p>

<pre><code>&lt;form name="formName"&gt;
&lt;component name="componentName"&gt;&lt;/component&gt;
&lt;/form&gt;
</code></pre>

<p>And inside the component I have</p>

<pre><code>&lt;ng-form name="{{$ctrl.name}}"&gt;
// Some inputs with special validation 
&lt;/ng-form&gt;
</code></pre>

<p>But every time I try to access the $ctrl.name inside my component is undefined, or just a string not a form with inputs inside.</p>

<p>I use TYPESCRIPT:</p>

<pre><code>@Component(app, {
  selector: 'component',
  templateUrl: 'templateUrl',
  bindings: {
    value: '=?ngModel',
    name: '@',
    required: '=?ngRequired',
    disabled: '=?ngDisabled',

  },
})
    console.log(this.name); ///A string, but no a form so I can manipulate it.
</code></pre>