Question

我在格式化反应式表格时遇到了麻烦。我正在通过服务显示数据，然后将其设置为表单的值。我遇到的麻烦是表单数据的格式不正确，以便它可以传递到我的后端API。

如何为嵌套表单值创建表单控件
当我单击编辑并检查设置值是否显示正确格式时，表单集上的set.value就是这些值的表单：
{ "id": 1, "productName": "Scotch", "category": { "category": 6, "CategoryName": "Household" }, "fullPrice": 46.5, "salePrice": 35.26, "availability": true, "supplier": { "supplier": 1, "supplierName": "3M" }, "discount": "76%" }

当我用两个更改表单值时，选择一个新的供应商和类别，然后使用Json管道检查该值，我文件的当前值是：
{ "id": 1, "productName": "Scotch", "category": "Household", "fullPrice": 46.5, "salePrice": 35.26, "availability": true, "supplier": "3M", "discount": "76%" }

类别和供应商在我的表单中通过选择选项表示。每个选项应同时代表选项的ID和名称。例如供应商1通用汽车供应商2雅培医疗光学有限公司。

我知道问题在于我如何在ts文件中构造表单，但是在创建代表这些补丁值的from控件时遇到了问题。

如何创建表单控件来表示我的ts文件中的补丁值
formGroup是在我的html中用<form [formGroup]="updateProduct" (ngSubmit)="onSubmit()">

定义的。

表格html：

<ng-container *ngIf="editMode === i">

          <td><input class="form-control"  formControlName="id"  disabled></td>
          <td><input class="form-control" id="productName"  formControlName="productName" ></td>
          <td >
              <select class="form-control" formControlName="category">
                <option selected="selcected"  id="opt1" ></option>
                <option *ngFor="let category of categories" [value]= "category.categoryName">{{category.categoryName}}</option>
              </select>
            </td>
          <td><input class="form-control" id="fullprice" formControlName="fullPrice"></td>
          <td><input class="form-control" id="saleprice"   formControlName="salePrice"></td>
          <td><input type="checkbox" class="form-control" id="availability"  formControlName="availability" ></td>
          <td>
            <select class="form-control" formControlName="supplier" >
              <option *ngFor="let supplier of suppliers" [value]="supplier.supplierName">{{supplier.supplierName}}</option>
            </select>
          </td>
          <td><input class="form-control" formControlName="discount" id="discount" ></td>

        </ng-container>

设置表单值的方法在我的Subscribe方法中，因此，一旦我的ts文件中的某个方法单击该表单，就立即设置表单。

this.homeService.getProduct(this.id).subscribe(data => {
  this.product = data;
  this.updateProduct.setValue({
    id: this.product.id,
    productName: this.product.productName,
    category: {
   // this.product.category.category is the category Id. same format as this.product.supplier.supplier
      category:this.product.category.category,
      CategoryName:this.product.category.categoryName
    },
    fullPrice: this.product.fullPrice,
    salePrice: this.product.salePrice,
    availability: this.product.availability,
    supplier:{
      supplier: this.product.supplier.supplier,
      supplierName:this.product.supplier.supplierName
    },
    discount: this.product.discount
  });
}); 
}

Ts.file具有我的形式：

    updateProduct = new FormGroup({
      id: new FormControl(''),
      productName: new FormControl(''),
      category: new FormControl(''),
      fullPrice: new FormControl(''),
      salePrice: new FormControl(''),
      availability: new FormControl(''),
      supplier: new FormControl(''),
      discount: new FormControl(''),

    });

我尝试过这样格式化我的表单

    updateProduct = new FormGroup({
      id: new FormControl(''),
      productName: new FormControl(''),
      category: new FormGroup({
        category: new FormControl(''),
        categoryName: new FormControl('')
      }),
      fullPrice: new FormControl(''),
      salePrice: new FormControl(''),
      availability: new FormControl(''),
      supplier: new FormGroup({
         supplier: new FormControl(''),
         supplierName: new FormControl('')
      }),
      discount: new FormControl(''),

    });

我确实尝试嵌套我的供应商和类别输入，但是似乎并没有注册我的设置值。我希望能够将类别作为一个值传递，但是该值位于对象this.product.category.category和this.product.category.categoryName作为通过我的选择的一种表单控件中。

如何为嵌套表单值创建表单控件

0 个答案: