title: How do I access a FormGroup value from a separate component in Angular2?
body: <p>So in my FromComponent I have a FormGroup.
  I have another component named ReviewComponent that doesn't have a FormGroup.</p>
  
  <p>I need to access the data in the FromComponent's FormGroup....for example (FromForm.controls.contact.value).</p>
  
  <p>I know how to pass regular variables on to separate components, but whenever I try to access a FormGroup, it just comes up as undefined.</p>
  
  <pre><code>    import {
      FormBuilder,
      Validators,
      ReactiveFormsModule,
      FormGroup,
      ControlValueAccessor,
  }                               from '@angular/forms';
  import {
      Component,
      Input,
      Output,
      OnInit,
      ElementRef,
      Injectable,
      ViewEncapsulation,
      ViewChild,
      OnChanges,
      AfterViewInit
  }                               from '@angular/core';
  
  
  @Component({
      moduleId: module.id,
      selector: 'app-wiz-from',
  })
  
  @Injectable()
  export class WizFromComponent implements OnInit, OnChanges, AfterViewInit {
      public fromForm: FormGroup;
  
      constructor(
          public fb: FormBuilder, 
      ) {}
  
      ngOnInit() {
          // Create the Form Group.
          this.fromForm = this.fb.group({
              contact: [this.shipment.shipment[0].addresses[0].contactName, Validators.required],
              email: [this.shipment.shipment[0].addresses[0].email, Validators.pattern(this.email_reg)]
          });
      }
  
  
      goNext() {
          console.log('Testing Data: ', this.fromForm);
          var address = new Addresses()
          address.type = 'fromPerson',
          address.contactName = this.fromForm.controls.contact.value,
          address.email = this.fromForm.controls.email.value
          console.log('Clicked Next on From!');
      }
  }
  </code></pre>
  
  <p>Then on my outside component:</p>
  
  <pre><code>import { WizShipFromComponent } from '../wiz-ship-from/wiz-ship-from.component';
  
  constructor(
          public wizFrom: WizFromComponent
      ) {}
  
  export class WizReview() {
      console.log('From Contact: ', this.wizFrom.fromForm);
  }
  </code></pre>
  
  <p>But when I try to call this.wizFrom.fromForm like above, it returns undefined.
  Even stranger to me, if I just call the goNext() function from WizFromComponent, the function runs, but the fromForm.controls all come up as undefined.</p>
  
  <p>Any other type of variable returns fine. 
  What do I have to do to get the FormGroup data?</p>