Angular2 FormGroupの値を設定します

Question

FormGroupに値を設定しようとしています。私の角張ったバージョンはrc-5です。ここに私のコンポーネントです。

import { Component, Input, OnInit } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 

@Component({ 
    templateUrl: 'myHtmlPage.html', 
    providers: [ 
      UserService 
    ] 
}) 

export class UserDetailComponent implements OnInit { 
    user: User; 
    userDetailForm: FormGroup; 

    constructor(private userService: UserService, private route: ActivatedRoute, private formBuilder: FormBuilder) { 
      this.userDetailForm = this.formBuilder.group({ 
       email: new FormControl('', [<any>Validators.required]) 
      }); 
    } 

    getUser(id: number) { 
     this.userService.getById(id) 
      .subscribe((res) => { this.user = res.data; }, /*do stg*/,() => { this.userDetailForm.controls['email'].setValue(this.user.email); }); 
    } 

    ngOnInit() { 
     let id; 
     this.route.params.subscribe(params => id = +params['id']); 
     this.getUser(id); 
    } 

    //... 
} 

これは私のhtmlです。

<form [formGroup]="userDetailForm" (ngSubmit)="editUser(userDetailForm.value)"> 
<div class="card card-inverse col-md-6 offset-md-3" style="background-color: #333; border-color: #333;"> 
    <div class="card-block"> 
     <h4 class="card-title row"> 
      Details 
     </h4> 
     <div class="form-group row"> 
      <div> 
       <label for="email" class="card-subtitle">Email</label> 
       <div> 
        <input class="form-control" type="text" id="email" formControlName="email" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私の「ユーザーズクラス。

export class User { 
    email: string; 
} 

このコードに問題はありません。正常に動作します。しかし、 'User'クラスにいくつかのプロパティを追加したいのですが？ 'onCompleted'コールバックで毎回このように値を設定する必要がありますか？

form group expects a form group instance. please pass one in 

私は、コンストラクタから「ngOnInit」メソッドにコードを移動すると作品の非同期をサブスクライブするので、それはthis.user.emailの値を取得することはできません：私は、コンストラクタから購読の「onCompleted」コールバックにコードを移動すると、私はエラーを次取得します。私を助ける人はいますか？

Answer 1

私はrc5で動作していますが、REACTIVE_FORM_DIRECTIVES指示文を使用していません。私のShared.Module.tsではReactiveFormsModuleをインポートしてエクスポートします。あなたの問題が解決した場合や、より多くの助けが必要な場合にお知らせください。

@NgModule({ 
    imports: [CommonModule, FormsModule, ReactiveFormsModule, ...], 
    declarations: [...], 
    exports: [CommonModule, FormsModule, ReactiveFormsModule, ...] 
})