使用 Observables 作为默认值的 Angular 2 Formbuilder答案

【问题标题】：Angular 2 Formbuilder with Observables as default values使用 Observables 作为默认值的 Angular 2 Formbuilder
【发布时间】：2016-08-30 03:19:09
【问题描述】：

我对 Angular 2 Form (formbuilder) 的默认值有疑问：我的默认值是 observables（我从服务器检索），所以我不能像这样实现它们：

export class UserComponent implements OnInit{

userForm: ControlGroup;
userData: any; // Initialise the observable var

ngOnInit():any {

    this.userData = this._dataService.getAllData() // My Observable
        .subscribe(
            data => {
                this.userData = data;
            }
        );

    this.userForm = this._formBuilder.group({
                  // below the default value
        'username': [this.userData.username, Validators.compose([ 
            this.usernameValid
        ])]
}

有人知道我需要改变什么吗？因为表单在输入字段内没有显示任何内容...

【问题讨论】：

标签： forms typescript angular observable formbuilder

【解决方案1】：

我会尝试这样做，因为数据是异步加载的。因此，当响应存在/收到时，您需要更新表单元素的值。

ngOnInit():any {
  this.userData = this._dataService.getAllData()
    .subscribe(
      data => {
        this.userData = data;
        this.userForm.controls.username.updateValue(
                this.userData.username);
      }
    );

  this.userForm = this._formBuilder.group({
    'username': [this.userData.username, Validators.compose([ 
        this.usernameValid
    ])];
}

【讨论】：

代替username.updateValue()，使用username.setValue()。 updateValue() 已弃用。

【解决方案2】：

您也应该能够做到这一点：

data: Observable<any>;

ngOnInit():any {

   this.data = this._dataService.getAllData();

   this.data
      .map((data) => {
         return this._formBuilder.group({
            username: [ this.data.username,
               Validators.compose([this.usernameValid])
            ]
      })
      .subscribe((userForm) => {
         this.userForm = userForm
      })

}

然后在你的模板中使用异步管道：

<form *ngIf="data | async" [formGroup]="userForm">
   //...//
</form>

这样就不需要调用updateValue()，如果你有很多不同的字段都需要从可观察对象中设置默认值，它会使事情更容易维护。

【讨论】：