如何从 Observable 设置默认表单值?

Posted

技术标签:

【中文标题】如何从 Observable 设置默认表单值?【英文标题】:How to set default form Value from Observable? 【发布时间】:2021-11-12 22:15:29 【问题描述】:

这是我的 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));

最后一个和第二个语句收集产品可观察的价值并且工作正常。

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$ (observable) 设置 Form 的默认值

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

谢谢你帮助我。

【问题讨论】:

【参考方案1】:

您可以将整个 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]
          );
        
    );

【讨论】:

【参考方案2】:

您需要订阅 observable,以便当有一个值传递时,您可以接收它并使用它做一些事情。大概是这样的:

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

【讨论】:

以上是关于如何从 Observable 设置默认表单值?的主要内容,如果未能解决你的问题,请参考以下文章

如何在搜索表单上设置默认值?

如何在 codeigniter 表单中同时拥有默认值和设置值?

从 txt 文件中读取数据并将其添加到 Observable 集合中

如何根据决策(布尔)字段在现有表单的视图中设置默认值?

Reactive Form valueChanges observable 重置表单值

如何强制 observable 从 DOM 元素中读取值