Disabled Rows' Data in Reactive Forms Can't Be Submitted

Question

I have this unit_price inside of rows in reactive forms and it needs to be submitted and it also needs to be disabled because it is already set. Why i can't see the "unit_price" in the console.log after it is submitted? How can i fix this? Here the link of the code CODE LINK

initGroup() {
    let rows = this.addForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      ingredient_id: ['', Validators.required],
      unit_price: new FormControl({ value: '', disabled: true }, Validators.required),
    }))
  }

Answer 1

If you'd like to include all values regardless of disabled status, use getRawValue method instead of value

const Data = {
  ingredients: (this.addForm.get('rows') as FormArray).getRawValue(),
}

Stackblitz Example