如何设置 Observable 的默认表单值？

Question

这是我的 ts 组件

export interface Product{
    id?:string,
    name:string,
    price:string;
    quantity:string;
    tags:Tags[];
    description:string;
    files: File[];
}

product$:Observable<Product | undefined>;

ngOnInit(): void { 
  this.store.dispatch(new productActions.LoadProduct(fromProduct.getCurrentProductId.toString()));
  this.product$ = this.store.pipe(select(fromProduct.getCurrentProduct));
}

最后和第二个语句收集 product observable 的值并且工作正常。

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

现在我想要的是从 Product$ 设置 Form 的默认值（可观察）

以上代码设置了名称''的默认值。但我想从 (product$ | async).name----->> 设置一个默认值，这在 Html 中工作正常，但我不知道如何在打字稿中做到这一点。

谢谢你的帮助。

Answer 1

您需要订阅可观察对象，以便在传递值时，您能够接收它并使用它做一些事情。大概是这样的：

this.product$ = this.store.pipe(select(fromProduct.getCurrentProduct));
this.product$.subscribe(valueFromSubscription => this.product.patchValue(...));

Answer 2

您可以将整个 FormGroup 初始化放入订阅中。不过不要忘记使用第一个运算符，因为您只想执行一次然后取消订阅。

this.product$
    .pipe(first())
    .subscribe(product => {
        this.product = this.fb.group({
            name:[product.name,[
              Validators.required,
              Validators.minLength(1),
              Validators.maxLength(128)
            ]],
            price:['',
            Validators.required],
            tags:this.fb.array(this.tags),
            quantity:['',Validators.required],
            description:['',
            Validators.required]
          });
        }
    });

如何设置 Observable 的默认表单值？

How to set default form Value from Observable?

observable

typescript

angular

angular-reactive-forms