在Angular2 FormGroup中设置值

Question

我正在尝试在FormGroup中设置值。我的angular版本是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>

​

我的'User‘类；

export class User {
     email: string;
}

这段代码没有问题，它工作正常。但是，如果我想向'User‘类添加一些属性怎么办？我应该每次都像这样在'onCompleted‘回调中设置值吗？当我将代码从构造函数移动到subscribe的'onCompleted‘回调时，我得到了以下错误：

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

当我将代码从构造函数移动到“ngOnInit”方法时，它无法获取this.user.email的值，因为subscribe异步工作。有没有人能帮我？

Answer 1

我让它在rc5中工作，但我不再使用REACTIVE_FORM_DIRECTIVES指令。在我的Shared.Module.ts中，我导入和导出ReactiveFormsModule。如果它解决了您的问题，或者您需要更多帮助，请让我知道。

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