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

Question

I am new to Angular.

I create a formGroup as follows:

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]]
    });

I am assigning value to a formGroup as follows:

 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']
    });

After this when I use console to see the value of the form as follows:

console.log(this.updateItemForm.value);

Console Output:

{
  "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"
}

This does not show the values of some of the formControls but when I log those values individually as follows:

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

Console Output:

SA00001

I am able to see it.

Answer 1

This code is working as expected, All values are displayed except the disabled property. to display this values you can use getRawValue()

this.updateItemForm.getRawValue()

You can see a demo below on stackblitz

Stackblitz Demo

More discussion also available on How to access the value of an input disabled?