我想发布来自已检查产品的值，即使用户将这些字段留空

Posted 2023-03-11

【中文标题】我想发布来自已检查产品的值，即使用户将这些字段留空

【英文标题】：I want to post the values that comes from checked product even the user leaves empty those fields

【发布时间】：2020-04-07 20:09:57

【问题描述】：

我有一个表格来列出用户输入的产品。它具有属性 使用编辑按钮更新产品功能。并显示 确认对话框面板（引导模型）。在编辑面板中，我可以得到 并在输入字段中显示检查产品的值。但如果有些 输入字段留空，仅更新输入字段。我想要 发布来自已检查产品的值，甚至是用户 将这些字段留空。

**html **

    <tr>
      <td><input type="checkbox" class="checkall" id="checked" (change)="selectCheckbox($event,product)" />
      </td>

      <td id="tableCat">product.category</td>
      <td id="tableName">product.name</td>
      <td id="tableDesc">product.description</td>
      <td id="tablePrice">product.price</td>

      <td>

        <p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs"
            (click)="sendingValue()" data-title="Edit" data-toggle="modal" data-target="#edit"><i
              class="fas fa-edit fa-xs"></i></button>
        </p>
      </td>
      <td>
        <p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs"
            data-title="Delete" data-toggle="modal" data-target="#delete"><i
              class="far fa-trash-alt fa-xs"></i></button></p>
      </td>
    </tr>
  </tbody>

productUpdateForm.value|json 更新

正在检查产品数据 .TS

chkSelected: Array<any> = [];
 selectedName: any;
  selectedDesc: any;
  selectedPrice: any;
  selectedCat: any;

  selectCheckbox(event, val) 
    if (event.target.checked === true) 
      this.chkSelected = val._id;
      this.selectedName = val.name;
      this.selectedDesc = val.description;
      this.selectedCat = val.category;
      this.selectedPrice = val.price;
    
    //  else 
    //   const index = this.chkSelected.indexOf(val);
    //   this.chkSelected.splice(index, 1);
    // 
    console.log(this.chkSelected);
  

  init() 

    this.productUpdateForm = this.fb.group(
      name: ['', Validators.required],
      description: ['', Validators.required],
      price: ['', Validators.required],
      category: ['', Validators.required],
      _id: ['', Validators.required]
    );
  

 UpdateProduct() 
    this.menuService.updateProduct(this.productUpdateForm.value).subscribe((data) => 
      console.log(data);
      this.productUpdateForm.reset();
      this.socket.emit('refresh', );
      jQuery('#edit').modal('hide');
    );
  
  sendingValue() 
    jQuery('#updateName').val(this.selectedName);
    jQuery('#updateDesc').val(this.selectedDesc);
    jQuery('#updatePrice').val(this.selectedPrice);
    jQuery('#updateCat').val(this.selectedCat);
    console.log(this.selectedName);
  

服务

 updateProduct(body): Observable<any> 
    return this.http.put(BASEURL + '/menu/update-product/' + body._id, body);
  

更新产品的端点

 updateProduct(req, res) 
    Menu.update(
       company: req.company._id, "products._id": req.params._id ,
      
        $set: 
          "products.$": 
            name: req.body.name,
            description: req.body.description,
            price: req.body.price,
            category: req.body.category
          
        
      ,
       new: true 
    )
      .then(info => 
        res.status(httpStatus.OK).json( message: "product updated", info );
      )
      .catch(err => 
        res
          .status(httpStatus.INTERNAL_SERVER_ERROR)
          .json( message: "product update error", err );
      );
  

【参考方案1】：

我做到了，但我认为这不是一个好的编码方式。我用 [(ngModel)] 对于每个更新表单字段..但它警告我：

**It looks like you're using ngModel on the same form field as formControlName. 
Support for using the ngModel input property and ngModelChange event with** 

我不知道如何解决这个问题。