我需要为数组类型的控件返回一个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中,我可以创建动态复选框,并为用户启用特定操作。
component.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>
答案 0 :(得分:2)
首先,您没有返回Observable。您什么也不返回(没有在函数中添加任何return语句)。
此外,如果添加了一个,则将返回一个订阅,因为您在函数中使用了subscribe
。
如果您想从可观察对象创建表单数组,请按以下步骤操作:
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
})
});
}
您不需要其他功能,因为此功能可以满足您的所有需求。
首先过滤数据:这相当于条件。如果没有任何数据,则不会触发订阅。
然后,您映射可观察值以返回表单数组。
最后,您订阅并使用映射的值创建表单。