title: Insert reactive form input using ng-template (from outside of component)
body: <p><em>Note: I am looking the solution for Reactive Forms Approach. Solution for template drive forms is already <a href="https://stackoverflow.com/questions/46849570/cloned-elements-cannot-be-submitted-in-angular4/46863758#46863758">here</a></em></p>
  
  <p>I have a library which is having a reactive form and I am trying to insert form input using ng-template and ng-container (Line A).</p>
  
  <p><strong>LibraryComponent</strong></p>
  
  <p><strong><em>html</em></strong></p>
  
  <pre><code>&lt;form [formGroup]="mainForm"&gt;
    &lt;input type="text" formControlName="inside"&gt;
    &lt;ng-container [ngTemplateOutlet]="template"&gt;&lt;/ng-container&gt; //line A
  &lt;/form&gt;
  </code></pre>
  
  <p><strong><em>TS:</em></strong></p>
  
  <pre><code>export class LibraryComponent implements OnInit {
  
  @Input() template;
    mainForm: FormGroup;
    constructor(private formBuilder: FormBuilder) { }
  
    ngOnInit() {
      this.mainForm = this.formBuilder.group({
        inside: ['inside'],
        outside: ['outside'],
      });
  
    }
  
  }
  </code></pre>
  
  <p><strong>AppComponent</strong></p>
  
  <pre><code>&lt;app-library [template]="outer"&gt;&lt;/app-library&gt;
  
  
  &lt;ng-template #outer&gt;
        &lt;input type="text" formControlName="outside"&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>While doing this I get <strong>error</strong>:</p>
  
  <pre><code>preview-d2335ca5bdb955611c1cb.js:1 ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
         directive and pass it an existing FormGroup instance (you can create one in your class).
  
        Example:
  
  
      &lt;div [formGroup]="myGroup"&gt;
        &lt;input formControlName="firstName"&gt;
      &lt;/div&gt;
  
      In your class:
  
      this.myGroup = new FormGroup({
         firstName: new FormControl()
      });
      at Function.ReactiveErrors.controlParentException (reactive_errors.ts:14)
      at FormControlName._checkParentType (form_control_name.ts:272)
      at FormControlName._setUpControl (form_control_name.ts:277)
      at FormControlName.ngOnChanges (form_control_name.ts:207)
      at checkAndUpdateDirectiveInline (provider.ts:208)
      at checkAndUpdateNodeInline (view.ts:429)
      at checkAndUpdateNode (view.ts:389)
      at debugCheckAndUpdateNode (services.ts:431)
      at debugCheckDirectivesFn (services.ts:392)
      at Object.eval [as updateDirectives] (VM1408 AppComponent.ngfactory.js:41)
  </code></pre>
  
  <p>Any help will be greatly appreaciated.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-urku61?file=src%2Fapp%2Flibrary%2Flibrary.component.ts" rel="nofollow noreferrer">Stackblitz</a></p>