时间戳

首页 > 解决方案 > 从 Observable 返回 formbuilder 数组

angular - 从 Observable 返回 formbuilder 数组

问题描述

我需要为数组类型控件返回一个 FormControl 数组。但是我需要知道有多少值进入我的 Observable 才能挂载这些数据。

这是代码：

users$ = this._store.select(usersSelectors.getUsers);

createForm(): void {
    this.myForm = this._formBuilder.group({
        users: this.buildArray(),
    });
}

buildArray(): any {
    this.users$.subscribe((data) => {
        if (data) {
            const values = data.map(() => new FormControl(false));
            return this._formBuilder.array(values);
        }
    });
}

原因是在 HTML 中，我可以创建动态复选框，并启用用户执行特定操作。

组件.html

<div class="col-md-3">
  <label for="users">Users</label>
  <div id="users" class="row">
    <div class="checkbox" class="col-sm-4"
      formArrayName="users"
      *ngFor="let item of myForm.get('users').controls; let i = index" >
      <label class="checkbox-inline">
        <input type="checkbox" [formControlName]="i"> {{ users$[i] }}
      </label>
    </div>

标签： angularformstypescriptobservable

解决方案

首先，你没有返回 Observable。您没有返回任何内容（您没有在函数中添加任何 return 语句）。

此外，如果您添加了一个，您将返回一个订阅，因为您subscribe在函数中使用了该订阅。

如果你想从你的 observable 创建一个表单数组，方法如下：

users$ = this._store.select(usersSelectors.getUsers);

createForm(): void {
  this.users$
    .pipe(
      filter(data => !!data),
      map(users => this._formBuilder.array(users.map(() => new FormControl(false))))
    )
    .subscribe(usersFormArray => this.myForm = this._formBuilder.group({
      users: usersFormArray
    })
  });
}

您不需要其他功能，因为此功能可以满足您的所有需求。

您首先过滤数据：这相当于条件。如果没有任何数据，则不会触发订阅。

然后，映射可观察值以返回表单数组。

最后，您订阅并使用映射值创建表单。

推荐阅读