结合 Angular 的 FormBuilder 和异步代码Observables

问题描述

我有一个 Observable 数组，我通过 Angular 的异步管道以一种形式显示它们。 devices$ 数组是动态的，我通过单击按钮向其中添加元素。

<form [formGroup]="devices_form" (ngSubmit)="submitForm()">
   <div *ngFor="let device of devices$">
      <div *ngIf="device | async as device">
        <input value="{{ device.name }}">
        <input value="{{ device.type }}">
      </div>
    </div>
</form>

我现在需要通过 Angular 的 FormBuilder 提交 name 的数据（devices$ 等）。我想我需要先映射/迭代 devices$ 数组，订阅其元素并将结果推送到 FormGroup 字段。

虽然我很困惑，因为我的 Observables 当然是异步的，并且在提交表单时我必须确保我的数据是“完整的”，如果这有意义的话。到目前为止，我不会在我的 TypeScript 代码中手动订阅 Observable。

这是我的简化代码：

// Interface of device
export interface Device {
 name: string,type: string
}

// Devices form I need to submit
this.devices_form = this.formBuilder.group({
   devices: ['',Validators.required]
});

// Submit form if valid
submitForm() {

   // I guess I need to set the devices value here
   this.devices_form.get('devices').setValue('array data here...');

   if (this.devices_form.valid) {
      this.saveData(this.devices_form.value);
   }
}

我已经尝试映射 devices$，订阅其元素并将其添加到 FormGroup。虽然，由于它是异步数据，它无法正常工作（因为订阅从未“完成”，我没有收到正确数量的元素）。我也尝试过 FormArray（来自 Angular）但没有成功。

有人知道如何将异步代码与一组 Observable 和 Angular 的 FormBuilder 结合起来吗？

先谢谢你！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）