在 Angular2 FormGroup 中设置值答案

【问题标题】：Set values in Angular2 FormGroup在 Angular2 FormGroup 中设置值
【发布时间】：2016-08-25 15:28:45
【问题描述】：

我正在尝试在 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;
}

这段代码没有问题，它可以正常工作。但是，如果我想向“用户”类添加一些属性怎么办？我是否应该在“onCompleted”回调中每次都像这样设置值？当我将代码从构造函数移动到订阅的“onCompleted”回调时，出现以下错误：

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

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

【问题讨论】：

this.form=this.formBuilder.group({email='a@a.com' //然后是其他属性})
我已经在“onCompleted”回调中尝试过您的解决方案。正如我所说，它会引发错误form group expects ....。它以我的方式工作，但我问这个问题有没有更好的解决方案？ @rashfmnb

标签： angular angular2-forms

【解决方案1】：

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

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

【讨论】：