Angular 表单值不显示，但是单独显示控件值

Question

我是 Angular 的新手。

我创建了一个 formGroup 如下：

this.updateItemForm = this.formBuilder.group({
      itemId: [{value:'', disabled: true},[Validators.required]],
      itemType: [{value:'', disabled: true},[Validators.required]],
      quantity: ['',[Validators.required]],
      costPrice: [{value:'', disabled: true}],
      sellingPrice: ['',[Validators.required]],
      color: ['',[Validators.required]],
      material: ['',[Validators.required]],
      store: ['',[Validators.required]],
      details: [''],
      image: ['',[Validators.required]],
      trader: [''],
      status: ['',[Validators.required]]
    });

我正在为 formGroup 赋值，如下所示：

 this.updateItemForm.setValue({
      'itemId': itemDetail['itemId'],
      'itemType': itemDetail['itemType'],
      'quantity': itemDetail['quantity'],
      'costPrice': itemDetail['costPrice'],
      'sellingPrice': itemDetail['sellingPrice'],
      'color': itemDetail['color'],
      'material': itemDetail['material'],
      'store': itemDetail['store'],
      'details': itemDetail['details'],
      'image': itemDetail['image'],
      'trader': itemDetail['trader'],
      'status': itemDetail['status']
    });

之后当我使用控制台看到表单的值如下：

console.log(this.updateItemForm.value);

控制台输出：

{
  "quantity": 1,
  "sellingPrice": 350,
  "color": "Blue",
  "material": "Silk",
  "store": "Anjali Rama Market",
  "details": "",
  "image": "KgSt2nyLBGt8BNrqqAgk0lK3jFDGkmTUYqg09BTMGPhlComBhGs5cgp+fgBP74VWTcHAAzRk4UIK/eyrPX7ZbayawZKqyO1aJIorxzkhRJ+4kTAtdgIl6HbOw8Nnfun79VM2xi/ug1iGoQCAhnIegAeKIW1xvuKjKuB/cQu4NU2qNYoRjcF+2VRQ7PchecPLkN8rJyVvE1NS4aTa1brcPqKUlKJcRxjAAzoA4g3Vdr7jz9veniu3F7gmIK1CUFuZ5LsBB8ktLU0fz/Ht6UvaVM8re8IUuQvMyvy6VoOZtTbd2Bl+7yLhYiDTog87gquE168gaDVOlEB0h7QCwxcfJsw7XjZCZSb01qH0enh2H3QNBp39QGYDLJe6fh6A/lFIh6C2HHrOg3FvEIVzDpQTRw0ARVEU5ajslN78xRXw5Ml6zV/Ckj4ZNtTRDxMAEzDuh/w8CItjKGewvwIdCXSUoH4W7AHN9Z9MCsd+iqIoinKqcR/0pTBaFiHeScGCeUi6+FU6pSESscz98BEOOwqjp0F9vwgGByzkNajsgOEqFHZLueCh538X5XjRCICiKIryK+UeGOyRzoYTOUwEff6PeF4XNFfB+MNQrkP8+qA1sKIoiqK85tjgZgT8OrIFujeIp/68PAWDJ/KaFqKNGrU+qejJVBRFeQXxw28OFwH+OovbpqC85bD2vVthxQQMX+Qa+twLIyfymi7vr7n/k8irsg5VURTlVMFA7jf9V4Pa/6XyAPR3wunXyLheQIwcN/a4Fb5/9/OE/RVFURRFUURRFURRFURRFURTlePn/SN3zX7oCQwYAAAAASUVORK5CYII=",
  "trader": "ABCDEX",
  "status": "In Stock"
}

这不显示某些 formControl 的值，但是当我按如下方式单独记录这些值时：

console.log(this.updateItemForm.controls['itemId'].value);

控制台输出：

SA00001

我能看到。

Answer 1

尝试补丁值

  this.updateItemForm.patchValue({
        'itemId': itemDetail['itemId'],
        'itemType': itemDetail['itemType'],
        'quantity': itemDetail['quantity'],
        'costPrice': itemDetail['costPrice'],
        'sellingPrice': itemDetail['sellingPrice'],
        'color': itemDetail['color'],
        'material': itemDetail['material'],
        'store': itemDetail['store'],
        'details': itemDetail['details'],
        'image': itemDetail['image'],
        'trader': itemDetail['trader'],
        'status': itemDetail['status']
      });

setValue 用于单个控件

Answer 2

此代码按预期工作，显示除禁用属性之外的所有值。要显示此值，您可以使用 getRawValue()

this.updateItemForm.getRawValue()

您可以在下面的 stackblitz 上看到一个演示

Stackblitz Demo

更多讨论也可在

上进行

Angular 表单值不显示，但是单独显示控件值

Angular form value not displaying, but control value individually is displayed

angular

angular-reactive-forms

angular-forms