在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中設置值

回答

相關問題