在Angular2 FormGroup中设置值

我想在FormGroup中设置值。我的角度版本是rc-5。这是我的组件;在Angular2 FormGroup中设置值

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值。有人帮我吗？

来源

2016-08-24 ulubeyn

this.form = this.formBuilder.group（{email='[email protected]” //然后其他属性}） – rashfmnb

我已经尝试过在你的解决方案 'onCompleted' 回调。正如我所说的那样，它会抛出一个错误“form group expect ....”。它以我的方式工作，但我问这是否有更好的解决方案？ @rashfmnb – ulubeyn

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

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

来源

2016-08-24 20:54:14

在Angular2 FormGroup中设置值

回答

相关问题