如何从Observable中获取数据设置Angular响应式表单的默认值

实现原理 #

| async 是Angular模板专属的语法糖，负责自动订阅Observable、取值、组件销毁时自动取消订阅，TS代码中无法直接使用该语法，需要手动订阅Observable获取流内的Product数据后填充到响应式表单中。

可选实现方案 #

方案1：先初始化表单，数据返回后自动填充

适合需要先渲染表单结构，待接口返回数据后自动填充的场景，支持数据后续更新时自动同步表单值：

import { Subject, takeUntil, tap } from 'rxjs';
import { FormArray } from '@angular/forms';

// 组件类内声明清理订阅用的Subject
private destroy$ = new Subject<void>();

ngOnInit(): void { 
  // 先初始化表单
  this.initProductForm();
  // 原有store逻辑
  this.store.dispatch(new productActions.LoadProduct(fromProduct.getCurrentProductId.toString()));
  this.product$ = this.store.pipe(
    select(fromProduct.getCurrentProduct),
    // 拿到Product数据后更新表单
    tap(product => {
      if (!product) return;
      // 普通字段批量赋值
      this.product.patchValue({
        name: product.name,
        price: product.price,
        quantity: product.quantity,
        description: product.description
      });
      // 单独处理FormArray类型的tags字段
      const tagsFormArray = this.product.get('tags') as FormArray;
      tagsFormArray.clear();
      product.tags.forEach(tag => {
        // 若tag是对象结构，替换为this.fb.group(对应结构)即可
        tagsFormArray.push(this.fb.control(tag));
      });
    }),
    // 组件销毁自动取消订阅，避免内存泄漏
    takeUntil(this.destroy$)
  );
}

private initProductForm(): void {
  this.product = this.fb.group({
    name:['',[
      Validators.required,
      Validators.minLength(1),
      Validators.maxLength(128)
    ]],
    price:['', Validators.required],
    tags:this.fb.array([]),
    quantity:['',Validators.required],
    description:['',Validators.required]
  });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

方案2：等Product数据返回后再初始化表单

适合不需要提前渲染表单，拿到完整数据后再生成表单的场景：

import { filter, take } from 'rxjs';

ngOnInit(): void { 
  this.store.dispatch(new productActions.LoadProduct(fromProduct.getCurrentProductId.toString()));
  this.product$ = this.store.pipe(select(fromProduct.getCurrentProduct));
  // 只取第一次有效值初始化表单，无需额外手动取消订阅
  this.product$.pipe(
    filter(product => !!product),
    take(1)
  ).subscribe(product => {
    this.product = this.fb.group({
      name:[product.name,[
        Validators.required,
        Validators.minLength(1),
        Validators.maxLength(128)
      ]],
      price:[product.price, Validators.required],
      tags:this.fb.array(product.tags.map(tag => this.fb.control(tag))),
      quantity:[product.quantity,Validators.required],
      description:[product.description,Validators.required]
    });
  })
}

注意事项 #

• 若tags是对象类型而非基础类型，只需将fb.control(tag)替换为fb.group({ /* 对应tag的字段结构 */ })即可
• 如果业务需要后续product$的值更新时同步修改表单值，优先选择方案1

内容的提问来源于stack exchange，提问作者Leonard Loss