Question

我有数据，我想以表格形式填充。我正在使用角度为6的反应形式。

演示应用

我有一个带有edit按钮的项目列表。单击edit按钮时，我将显示edit component

我想填充或设置输入字段中的所有值。我现在有一个obj中的数据，我想以表格形式填充

这是我的代码 https://stackblitz.com/edit/angular-pkf4wa?file=src%2Fapp%2Fedit%2Fedit.component.ts

在编辑组件上

ngOnInit() {
    this.product$=    this.store.pipe(select(fromProduct.getSelectedProduct))
  //       .subscribe((res)=>{
  //    console.log('ssssss');
  // console.log(res)
  //       },()=>{
  //         console.log('dddd')
  //       })

  }

编辑按钮单击

editProduct(product: Product,item) {
    const editProduct: EditProductInterface={
      product:product,
      selectedIndex:item
    }
   this.store.dispatch(new productActions.EditProduct(editProduct));
   this.router.navigate(['edit'])
  }

Answer 1

在angular中，有两种方法， setValue 和 patchValue ，使用这两种方法可以在表单控件中设置值。当您需要用数据填充所有表单控件时，请使用 setValue 方法；当您只需要用数据填充特定表单控件时，请使用 patchValue 方法。下面是代码示例，希望对您有所帮助。

userForm：FormGroup;

** ///当您需要在表单的所有控件中填充数据时，请使用以下代码示例。

this.userForm.setValue({
    firstName:'test first name',
    lastName:'test last name',
    email:'test@test.test'
});

** ///仅在特定表单控件中填充数据时使用以下代码示例

this.userForm.patchValue({
    firstName:'test first name',
    lastName:'test last name'
});

在以上两种方法中，我使用了firstName，lastName和email属性，这些属性名称必须与您在HTML标记中给出的 formControlName 名称相同。

setValue和patchValue方法的官方文档可用here。

Answer 2

使用patchValue设置formControlValue

   this.store.pipe(select(fromProduct.getSelectedProduct))
        .subscribe((res)=>{
          console.log('ssss'+res.productName)
          this.productForm.patchValue({
            productName: res.productName, 
            starRating: res.starRating, 
            productCode: res.productCode, 
            description: res.description, 
            id: res.id
          });
        },()=>{
          console.log('dddd')
        })

Demo

Answer 3

为此使用patchValue。

this.store.pipe(select(fromProduct.getSelectedProduct)).subscribe((res) => {
    this.productForm.patchValue(res);
})

Answer 4

您可以这样做：

<input type="text" name="name" [(ngModel)]="product.name"
                required ngModel #name="ngModel">

或者这个：

<input type="text" name="name" value="{{product.name}}"
                required ngModel #name="ngModel">

Answer 5

如果只需要更新某些字段，请使用patchValue。如果您打算更新所有字段，则也可以按照以下建议使用setValue。

    this.productForm.patchValue({
      productName: res.productName,
      id: res.id
    });

    this.productForm.setValue({
      productName: res.productName,
      id: res.id,
      starRating: res.starRating,
      productCode: res.productCode,
      description: res.description,
    });

如何以角度4的形式设置值？

5 个答案: