title: How to use reactive forms inside ng-template
body: <p>I have just started with Angular 4 and I need to develop a CRUD grid, where the user can add, edit or delete rows.</p>
  
  <p>During my research I found this article where it shows how to create the grid and also the actions: <a href="http://www.dotnetcurry.com/angularjs/1380/angular-4-grid-crud" rel="noreferrer">Angular 4 Grid with CRUD operations</a>. </p>
  
  <p>Looking at his code, what called my attention was the way he is using the ng-template to toggle between edit/view mode.</p>
  
  <pre><code>&lt;tr *ngFor="let emp of EMPLOYEES;let i=idx"&gt;
   &lt;ng-template [ngTemplateOutlet]="loadTemplate(emp)" [ngOutletContext]="{ $implicit: emp, idx: i }"&gt;&lt;/ng-template&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>On the article he uses template driven forms to edit the row. However, I was trying to change to reactive forms.</p>
  
  <p>In my attempt to do that, I tried to replace the [(ngModel)] to formControlName and I got some errors. My first attempt I tried to add the [formGroup] at the beginning of the template html inside form element. But when I tried to run and edit the row, I got the following error:</p>
  
  <pre><code>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).
  </code></pre>
  
  <p>When I tried to move the [formGroup] inside the ng-template it works, however I was not able to bind the value to the fields and I had to set the values in the loadTemplate function:</p>
  
  <pre><code>loadTemplate(emp: Employee) {
      if (this.selemp &amp;&amp; this.selemp.id === emp.id) {
  
          this.rForm.setValue({
              id: emp.id,
              name: emp.name
          });
  
          return this.editTemplate;
      } else {
          return this.readOnlyTemplate;
      }
  }
  </code></pre>
  
  <p>This works and show the values inside the fields in a read only mode :(</p>
  
  <p>Here is the <a href="https://plnkr.co/edit/KC8n3FN02KIhvblWztxP?p=preview" rel="noreferrer">Plunker</a> of what I have got so far.</p>
  
  <p>How can I make a reactive form work with ng-template and how to set values to edit the entries?</p>
  
  <p>Any help is appreciated! Thanks</p>