从许多可观察对象中填充 Angular formGroup

Question

我有一个 postcode$ 可观察对象，当我使用 this.customerForm = this.formBuilder.group({}).

创建表单组时，我想用它的值填充 postalCode 表单输入

建议在可观察对象的 subscribe 中初始化表单：

ngOnInit() {
    // ...
    // .take(2) to ensure that it will run only for the first value:
    contactsObservable.take(1).subscribe(contacts => {
        this.form = this.fb.group({contact: [this.contacts[0], Validators.required]];
    });
    // ...
}

但是，我的表单有很多不同的字段，需要从各种可观察值中填充...

  initForm = () => {
    this.myForm = this.form.group({
      postCode: ['', Validators.required],
      // ...many other fields...
    });
  };

是否可以直接从 observable 填充 ''？如果是这样，我可以简单地将众多可观察值传递到一个表单组生成器中。

Answer 1

解决此问题的一种方法是使用 forkJoin 组合所有可观察值。

基本上，这个函数接受一个 observables 数组，当所有的都完成后，然后将发出的值组合起来并返回到一个数组中，顺序与您的 observables 数组相同，更多细节 here。

import { forkJoin } from 'rxjs';

const observables: Array<Observable<TA | TB | TC>> = [observableA$, observableB$, observableC$]; // N quantity of observables

forkJoin(observables).subscribe((responseData: Array<TA | TB | TC>) => {
  this.myForm = this.form.group({
    firstField: [responseData[0] as TA, [Validators.required]],
    secondField: [responseData[1] as TB, [Validators.required]],
    thirdField: [responseData[2] as TC, [Validators.required]],
  });
});

从许多可观察对象中填充 Angular formGroup

Populate Angular formGroup from many observables

angular

forms

initialization

observable