带有可选字段的 Angular NgForm.setValue({})

Question

我有一个模板驱动的角度形式， 当我单击产品时，我想在其上填充值。 'description' 和 'imageUrl' 字段可能是未定义的，如果我不照顾它会破坏我的表单。 我设法用这个解决方案做到了：

  private initFormEdit() {
    this.product = this.productService.fetchProduct(this.restaurantId, this.productId);

    // I'm using a ternaty operator to put a default value if objects are empty
    const description = this.product.description ? this.product.description : '';
    const imageUrl = this.product.imageUrl ? this.product.imageUrl : '';

    this.productForm.setValue({
      name: this.product.name,
      category: this.product.category,
      description,
      price: this.product.price,
      imageUrl
    });
  }

有没有更简单或更干净的方法来做到这一点？ 谢谢！

Answer 1

Angular 有 patchValue 和 setValue

虽然setValue 期望提供表单中定义的每个字段，但patchValue 不提供。

在你的例子中

// this throws
this.productForm.form.setValue({
      name: this.product.name,
      category: this.product.category,
      price: this.product.price,
    });

//this does not throw
this.productForm.form.patchValue({
      name: this.product.name,
      category: this.product.category,
      price: this.product.price,
    });

这对patchValue 有效，但对setValue 无效-> 针对您的情况使用patchValue

请注意，表单本身包含一个名为 form 的 formGroup，您必须使用它，因为 ngForm 没有 patchValue 方法。

更新
有some caveats 使用pachValue 和模板驱动的表单，具体取决于您何时调用patchValue。
您还可以使用某种映射器/初始化器，在其中设置对象的每个缺失或未定义成员。
如果可能的话，我个人会选择patchValue 路线。