Angular2 - console.logでモデル駆動型のデータを表示する方法

Question

私はconsole.logにしようとしているモデルドリブンフォームを持っています this.userForm.email、それは私に次のエラーが表示されます： 'email'プロパティが存在しませんタイプ 'FormGroup'で。誰も助けることができますか？

app.component.html

<div class="container"> 
     <h2>User Data</h2> 
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()"> 
         <div class="form-group"> 
          <label>Name</label> 
          <input type="text" class="form-control" formControlName="name"> 
         </div> 
         <div class="form-group"> 
           <label>Email</label> 
           <input type="text" #refName class="form-control" formControlName="email"> 
           <b>{{refName.className}}</b> 
         </div> 

         <div formGroupName="address"> 
          <div class="form-group"> 
           <label>Street</label> 
           <input type="text" class="form-control" formControlName="street"> 
          </div> 
          <div class="form-group"> 
           <label>City</label> 
           <input type="text" class="form-control" formControlName="city"> 
          </div> 
          <div class="form-group"> 
           <label>PostalCode</label> 
           <input type="text" class="form-control" formControlName="postalcode"> 
          </div> 
         </div> 

         <button type="submit" class="btn btn-primary">Submit</button> 
      </form> 
</div> 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { ReactiveFormsModule } from '@angular/forms'; // see peab olema 
import { AppComponent } from './app.component'; 


@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    ReactiveFormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms' 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 
    userForm = new FormGroup({ 
     name: new FormControl('Brandon'), 
     email: new FormControl(), 
     address: new FormGroup({ 
     street: new FormControl(), 
     city: new FormControl(), 
     postalcode: new FormControl() 
    }) 
}); 
    onSubmit(){ 
     console.log(this.userForm.email); 

    } 
} 

Answer 1

012を使用代わりに。