javascript - Angular 6 patchValue 更新了值，但在我提交时却没有更新？

Question

我正在更新模糊字段的值，使其成为模糊时的货币值。当我输入我的值并离开表单控件时，模糊更新会起作用并使值(20.00)变为($20.00)或(20.05060)变为($20.00)，但是当我单击“生成表单”按钮时，它会按原样控制台记录该值在我的 patchValue 之前。我该如何解决这个问题？

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

Answer 1

这是预期的。您正在使用管道来修改客户端的数据，但不会更改数据的实际值。管道用于处理数据。请阅读https://angular.io/guide/pipes这可能会为您提供更多详细信息。