Angular2将Child Component表单值作为Objectable传递给父组件

Question

我正在尝试将子组件表单值作为Observable传递给父组件。提交表单时，在触发从其中一个下拉菜单中选择某些内容之类的事件之前，无法访问子组件表单值。有关如何访问默认值以及现有valueChanges事件的任何想法吗？

//Child Component
import {Component, Output} from '@angular/core'
import {FORM_DIRECTIVES, FormBuilder, ControlGroup} from '@angular/common'
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'state',
  providers: [FormBuilder],
  templateUrl: 'app/state.html',
  directives: []
})

export class State {

  statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];
  countriesDropDownValues = ['USA', 'CANADA', 'MEXICO', 'INDIA'];

  stateForm: ControlGroup

  @Output()
  stateFormChanges: Observable<any>;  

  constructor(fb: FormBuilder) {
    this.stateForm = fb.group({
      'state': 'NY',
      'country': 'USA',
      'zip': '10017'
    });

    this.stateFormChanges = this.stateForm.valueChanges;
  }

}

// Parent Component
import {Component} from '@angular/core'
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from '@angular/common'
import {State} from './state'

@Component({
  selector: 'my-app',
  providers: [FormBuilder],
  templateUrl: 'app/app.html',
  directives: [State]
})

export class App {
  registrationForm: ControlGroup;

  state: string;
  country: string;
  zip: string;

  constructor(fb: FormBuilder) {

    this.registrationForm = fb.group({
      'name': 'Test Name',
      'email': 'abc@xyz.com'
    });
  }

  handleStateFormChanges(formValues) {
    this.state = formValues.state;
    this.country = formValues.country;
    this.zip = formValues.zip;
  }

  onSubmit() {
    alert('Entered Name: ' + this.registrationForm.value.name);
    alert('State Selected: ' + this.state);
    alert('Country Selected: ' + this.country);
    alert('Zip Entered: ' + this.zip);
  }
}

这是我的代码的plunkr。