0

我有一个角度的模板驱动形式，当我单击产品时，我想在其上填充值。'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
    });
  }

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

4

1 回答 1

5

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

请注意，表单本身包含一个您必须使用的formGroup调用，因为没有该方法。formngFormpatchValue

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

于 2020-06-11T11:47:55.170 回答