javascript - angular 6 patchValue 更新值但不是在我提交时？

Question

我正在更新 blur 上的字段值，使其成为 blur 上的货币值。当我输入我的值并离开 formcontrol 时，模糊工作更新并使值 (20.00) 到 ($20.00) 或 (20.05060) 到 ($20.00) 但是当我单击生成表单按钮时，它 console.logs 值是在我的补丁值之前。我该如何解决？

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这可能会为您提供更多详细信息。