如何計算角度中的兩個表單欄位并對其進行修補

[參考圖片][1]

->你好，我需要做兩個欄位的計算，看一次參考影像。

->在基本工資欄位中，如果我在第一個保費金額上輸入 100 和 Gst %，如果我輸入 5，則在第一個保費金額中自動顯示 105 值，計算結果應為 (100 50 = 105)。

->相同，如果我在下一個保費金額的 GST % 中輸入 5 105 應顯示在下一個保費金額欄位中。[1]：https : //i.stack.imgur.com/KNtAa.png

uj5u.com熱心網友回復：

如果您使用的是角度反應形式，則可以使用 FormGroup 的 patchValue() 方法。

您可以參考檔案鏈接：回應式表單的 Angular 檔案

在您的情況下，您可以呼叫 onKeyPress 的 patchValue 方法。

uj5u.com熱心網友回復：

有一個帶有一些“計算值”的表單是一個很常見的問題。

在 Angular 中，我們有兩種管理表單的方法：回應式表單（formGroup 和 FormControl）或模板驅動表單（[(ngModel)]）

如果我們使用 [(ngModel)] 我們可以將計算值存盤在變數中（或不存盤）。如果我們使用 FormGroup，我們可以將計算值存盤在 FormGroup 的 FormControl 中，也可以不存盤。真的沒有必要存盤價值計算。我們可以制作，例如

<form #f="ngForm">
  <input name="cant" [(ngModel)]="cant" />
  <input name="porc" [(ngModel)]="porc" />
  <input name="result" readonly [ngModel]="( cant *  porc) / 100" />
</form>
{{f.value|json}} <---just to check


//in .ts
cant:number=0;
porc:number=0;

或者

<form [formGroup]="form">
  <input formControlName="cant">
  <input formControlName="porc">
  <input readonly [ngModel]=" form.value.cant*( form.value.porc)/100" 
                  [ngModelOptions]="{standalone:true}">
</form>
{{form?.value|json}} <--just to check

//in .ts
  form=new FormGroup({
    cant:new FormControl(0),
    porc:new FormControl(0)
  })

看到總是需要轉換為數字“值”。這是將 添加到值的原因。另請參閱 .ts 中唯一的代碼是宣告變數或宣告 formGroup

我使用只讀輸入，但您可以使用跨度或 div

好吧，如果我們想將結果存盤在一個變數中 - 或者在 formGroup 的 FormControl 中，我們需要進行一些更改

<form #f="ngForm">
    <input name="cant" [ngModel]="cant" 
         (ngModelChange)="cant= $event;calculateResult()" />
    <input name="porc" [(ngModel)]="porc" 
         (ngModelChange)="porc= $event;calculateResult()"/>
    <input name="result" readonly [ngModel]="result" />
</form>
{{f.value|json}}

//in .ts
//add a new variable
result:number=0
//and add the function calculateResult
calculateResult(){
   this.result=this.cant*this.porc/100
}

了解如何在 [ngModel] 和 (ngModelChange) 中“拆分”[(ngModel)]。

使用反應式

<form [formGroup]="form">
  <input formControlName="cant" (input)="calculateResultForm()" />
  <input formControlName="porc" (input)="calculateResultForm()"/>
  <input readonly formControlName="result" />
  />
</form>

//in .ts
  form=new FormGroup({
    cant:new FormControl(0),
    porc:new FormControl(0),
    result:new FormControl(0) //<--we add this FormControl
  })
  //and the function
  calculateResultForm()
  {
    this.form.get('result').setValue(
          this.form.value.cant*( this.form.value.porc)/100)
  }

好吧，在reactiveForms 中通常使用可觀察的valueChanges而不是使用事件輸入。valueChanges 是一個可觀察的。這意味著您可以訂閱更改（在 ngOnInit 中）。例如我們可以做

ngOnInit(){
    this.form.get('cant').valueChanges.subscribe((res:any)=>{
      this.calculateResultForm()
   })
   this.form.get('porc').valueChanges.subscribe((res:any)=>{
      this.calculateResultForm()
   })
}

  calculateResultForm()
  {
    //see that in this case we can NOT use
    //this.form.value.cant and this.form.value.porc
    //because the value is with the old values

    const cant= this.form.get('cant').value
    const porc= this.form.get('porc').value
    this.form.get('result').setValue(cant*porc/100)
  }

那么 observable 的“問題”是我們需要在組件的 ngDestroy 中取消訂閱，所以我們宣告了兩個變數

   sub1:Subscription
   sub2:Subcription

當使用我們使用的 valueChanges 時

    this.sub1=this.form.get('cant').valueChanges.subscribe((res:any)=>{
      this.calculateResultForm()
   })
   this.sub2=this.form.get('porc').valueChanges.subscribe((res:any)=>{
      this.calculateResultForm()
   })

在 ngOnDestroy 我們寫

  ngOnDestroy(){
    this.sub1.unsubscribe()
    this.sub2.unsubscribe()
  }

真的沒有人訂閱每個 FormControl，通常我們使用 rxjs 運算子來創建一個唯一的訂閱。

我們可以使用 rxjs 運算子merge。別擔心它只是把值的變化用逗號分隔

    this.sub1=merge(
      this.form.get('cant').valueChanges,
      this.form.get('porc').valueChanges
    ).subscribe((res:any)=>{
      this.calculateResultForm()
   })

其他方法是使用 forkJoin 或類似方法，使用 takeUntil 或 takeWhile 自動取消訂閱等，但這個答案有點大

注意：我知道當你第一次見到 ReactiveForms 和 Observables 時，會有些害怕。真的，它們是一個強大的工具，我們需要了解一下它們

如果你得到了最終答案，太棒了！，你可以查看stackblitz

標籤：javascript html 有角的

上一篇：如何在AngularmatInput表單欄位中添加約束？

下一篇：如何找到方法來自的模塊/類？