angular 6 patchValue updates the value but not when I submit?

Question

I am updating the value of a field on blur making it into a currency value on blur. When I type my value and leave the formcontrol the update on blur works and makes the value (20.00) to ($20.00) or (20.05060) to ($20.00) however when I click the generate form button it console.logs the value as it was before my patchValue. How can I fix that?

export class InvoicesComponent implements OnInit {
  invoiceGeneratorForm: FormGroup;
  subtotalSub: Observable<any>;
  subTotal = 0;
  itemPriceCurrent: Observable<any>;
  prices = [];
  constructor(public fb: FormBuilder, private currencyPipe: CurrencyPipe) {}

  ngOnInit() {
    this.invoiceGeneratorForm = this.fb.group({
      firstName: [""],
      lastName: [""],
      email: [""],
      itemsArray: this.fb.array([this.getItems()]),
      tax: [""],
      subTotal: [{ value: this.subTotal, disabled: true }],
      invoiceTotal: [""]
    });


  }
 private pushCurrentPrice(index: number){
  const control = <FormArray>this.invoiceGeneratorForm.controls["itemsArray"];
   const currentControl= control.at(index)['controls']['itemPrice'];
   const typeCheck = parseFloat(currentControl.value)||0;
   const subFormatted = this.currencyPipe.transform(
    typeCheck,
    "USD",
    "symbol-narrow",
    "1.2-2"
  );
   currentControl.patchValue(subFormatted,{onlySelf: true, emitEvent: false});
   console.log(currentControl);

 }
  private getItems() {
    return this.fb.group({
      itemName: ["", Validators.required],
      itemPrice: [
        "",
        Validators.compose([
          Validators.required
        ])
      ]
    });
  }
  private addItemRow() {
    const control = <FormArray>this.invoiceGeneratorForm.controls["itemsArray"];
    control.push(this.getItems());
  }
  private deleteItemRow(index: number) {
    const control = <FormArray>this.invoiceGeneratorForm.controls["itemsArray"];
    control.removeAt(index++);
  }

  onGenerateForm() {
    console.log(this.invoiceGeneratorForm.value);
  }
}

alokstar · Accepted Answer · 2018-10-22 18:59:52Z

2

This is expected. You are using pipes which modifies your data on client side and do not change the actual value of the data. Pipes are used to process the data. Please read https://angular.io/guide/pipes which might give you more details.

answered Oct 22, 2018 at 18:59

alokstar

4992 silver badges7 bronze badges

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

7 Comments

Pari Baker Over a year ago

That makes sense, and that’s what I prefer, I just thought that the patchValue and setValue would eventually change the actual value.

Pari Baker Over a year ago

So I would just apply the same logic on submit

alokstar Over a year ago

If you want to change the object (data) itself then you have to do it explicitly.

Pari Baker Over a year ago

Yes but doesn’t patchValue itself change the value of my formControl?

alokstar Over a year ago

i might be wrong but i think you are getting confused between the data-binding and client side data formatting. When you are applying pipe (patch), you are not actually modifying the data. did i answer your question or i got it wrong?

|

Collectives™ on Stack Overflow

angular 6 patchValue updates the value but not when I submit?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related