title: How to use Angular 2's FormBuilder between multiple components
body: <p>I am trying to use FormBuilder in a page I have in Ionic 2. </p>
  
  <p>First, here is my environment details:
  Running on Windows 10, and running <em>ionic --version</em> gives me <em>2.0.0-beta.35</em></p>
  
  <p>Here is part of my <strong>package.json</strong> file:</p>
  
  <pre><code>...
  "@angular/common": "2.0.0-rc.3",
  "@angular/compiler": "2.0.0-rc.3",
  "@angular/core": "2.0.0-rc.3",
  "@angular/forms": "^0.3.0",
  "@angular/http": "2.0.0-rc.3",
  "@angular/platform-browser": "2.0.0-rc.3",
  "@angular/platform-browser-dynamic": "2.0.0-rc.3",
  "ionic-angular": "2.0.0-beta.10",
  "ionic-native": "1.3.2",
  "ionicons": "3.0.0"
  ...
  </code></pre>
  
  <p>Second, here are the two main files involved:</p>
  
  <p><strong>insight.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {NavController, NavParams} from 'ionic-angular';
  import {
    REACTIVE_FORM_DIRECTIVES,
    FormBuilder,
    FormControl,
    FormGroup
  } from '@angular/forms';
  import { App, Insight } from '../../models';
  import { InsightProvider } from '../../providers/insight/insight.service';
  import { InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo } from './shared';
  
  @Component({
    templateUrl: 'build/pages/insight/insight.html',
    directives: [REACTIVE_FORM_DIRECTIVES, InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo],
    providers: [App, InsightProvider, FormBuilder]
  })
  export class InsightPage {
  
    canAdd: boolean;
    showDetails: boolean;
    newInsight: Insight;
    insightForm: FormGroup;
  
    constructor(private insightProvider: InsightProvider,
                private params: NavParams) {
      this.insightForm = new FormGroup({
        type: new FormControl('', []),
        todo: new FormControl('', []),
        checked: new FormControl(false, []),
        imageUrl: new FormControl('', []),
        link: new FormControl('', []),
        url: new FormControl('', []),
        label: new FormControl('', []),
        question: new FormControl('', []),
        answer: new FormControl('', []),
        title: new FormControl('', []),
        details: new FormControl('', []),
      });
    }
  
    ngOnInit() {
      this.canAdd = false;
      this.showDetails = true;
    }
  
    addNewInsight() {
      if (this.newInsight.type) {
        this.insightProvider.createInsight(this.newInsight)
        .subscribe(response =&gt; {
          this.newInsight.setId(response.data.id);
          this.newInsight.title = '';
          console.log(response);
        });
      }
    }
  
    deleteClicked(index: number) {
      console.log('Clicked on ' + index);
      this.insightProvider.deleteInsight(this.newInsight)
      .subscribe(data =&gt; {
        console.log(data);
      });
    }
  
  
  }
  </code></pre>
  
  <p><strong>insight.html</strong></p>
  
  <pre><code>&lt;form [ngFormModel]="insightForm" (ngSubmit)="createNewInsight()"&gt;
        &lt;ion-item&gt;
          &lt;ion-label for="type"&gt;Insight Type&lt;/ion-label&gt;
          &lt;ion-select name="type" id="type" [formControl]="type"&gt;
            &lt;ion-option value="label"&gt;Label&lt;/ion-option&gt;
            &lt;ion-option value="thought"&gt;Thought&lt;/ion-option&gt;
            &lt;ion-option value="link"&gt;Link&lt;/ion-option&gt;
            &lt;ion-option value="question"&gt;Question&lt;/ion-option&gt;
            &lt;ion-option value="todo"&gt;Todo&lt;/ion-option&gt;
            &lt;ion-option value="image"&gt;Image&lt;/ion-option&gt;
            &lt;ion-option value="video"&gt;Video&lt;/ion-option&gt;
          &lt;/ion-select&gt;
        &lt;/ion-item&gt;
  
        &lt;div [ngSwitch]="type"&gt;
            &lt;insight-image [form]="insightForm" *ngSwitchCase="'image'"&gt;&lt;/insight-image&gt;
            &lt;insight-label [form]="insightForm" *ngSwitchCase="'label'"&gt;&lt;/insight-label&gt;
            &lt;insight-link [form]="insightForm" *ngSwitchCase="'link'"&gt;&lt;/insight-link&gt;
            &lt;insight-question [form]="insightForm" *ngSwitchCase="'question'"&gt;&lt;/insight-question&gt;
            &lt;insight-thought [form]="insightForm" *ngSwitchCase="'thought'"&gt;&lt;/insight-thought&gt;
            &lt;insight-todo [form]="insightForm" *ngSwitchCase="'todo'"&gt;&lt;/insight-todo&gt;
            &lt;insight-video [form]="insightForm" *ngSwitchCase="'video'"&gt;&lt;/insight-video&gt;
        &lt;/div&gt;
  
        &lt;button type="submit" block primary text-center (click)="addNewInsight()" [disabled]="!newInsight.type"&gt;
          &lt;ion-icon name="add"&gt;&lt;/ion-icon&gt; Add Insight
        &lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, I am trying to pass the FormGroup Object into multiple components so that I could use them.</p>
  
  <p>Here is an example of what one of the components look like (minimal version right now):</p>
  
  <pre><code>&lt;ion-item&gt;
    &lt;ion-label floating for="link"&gt;Link&lt;/ion-label&gt;
    &lt;ion-input type="text" name="link" id="link" [formControl]="link"&gt;&lt;/ion-input&gt;
  &lt;/ion-item&gt;
  
  &lt;ion-item&gt;
    &lt;ion-label floating for="url"&gt;URL&lt;/ion-label&gt;
    &lt;ion-input type="text" id="url" name="url" [formControl]="url"&gt;&lt;/ion-input&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p>The problem I am facing right now is this error:</p>
  
  <p><a href="https://i.stack.imgur.com/MY3Dz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MY3Dz.png" alt="Error from FormBuilder and Ionic 2"></a></p>
  
  <p>What I believe is happening is that the FormBuilder is looking for the given names I declare in my typescript file (such as todo, imageUrl, link, etc), but since it is in my other components, it errors out, thinking its not there.</p>
  
  <p>What could be the reason for this error? I have looked online and could not find related issues.</p>
  
  <p>FYI, the reason I am needing them in components and not in the same page, is because in the future, the functionality will be different for each input, thus needed to give each component a "Single Responsibility".</p>
  
  <p>Thanks in advance</p>