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.

Could you share how you have initialized this.updateItemForm because this should work — Owen Kelvin
– Owen Kelvin, Commented Mar 10, 2021 at 11:54
Thanks for your response, I have added the declaration of the form and this is the first time I am setting any values to it. — Ani
– Ani, Commented Mar 10, 2021 at 13:30

Owen Kelvin · Accepted Answer · 2021-03-10 17:19:07Z

2

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?

answered Mar 10, 2021 at 17:19

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ShanieMoonlight · Accepted Answer · 2021-03-10 11:47:30Z

1

Try patchValue

  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 is for individual controls

answered Mar 10, 2021 at 11:47

ShanieMoonlight

1,9713 gold badges20 silver badges35 bronze badges

1 Comment

Ani Over a year ago

Hi, thanks for pointing it out but my problem still persists.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest