角反應形式禁用輸入字段

Question

我有一個反應形式的組件

  form = this.fb.group({
    fullname: this.fb.group({
      name: '',
      lastName: '',
    }),
    income: this.fb.group({
      preTax: '',
      annualIncome: { value: '', disabled: true },
    }),
    job: '',
    realName: false,
  });

雖然禁用了AnnualIncome字段，但我已綁定到一個返回數字的方法

<input 
      formControlName="annualIncome" 
      [value]="calculateAnnualIncome(form.value.income.preTax)"
      type="text" 
      class="form-control">

調用的方法是：

  calculateAnnualIncome(preTax) {
    return preTax * 14 * ((100 - 21) / 100);
  }

雖然我在嘗試檢索它時在字段中看到該值，但它返回“”

console.log(this.form.get('income.annualIncome').value)

output: ""

如何獲得該字段的實際值？

Answer 1

在您的.ts中，

ngOnInit() {
    this.form.controls["income.annualIncome"].valueChanges.subscribe(value => {
       console.log(value);
    });
}

Answer 2

在Angular中，如果要獲取所有值，包括禁用的控件，則應使用：

this.form.getRawValue();

或者通過另一種方法將其設置為只讀而不是禁用 。 這樣，您可以按預期獲得該控件的價值。

Answer 3

如果您不想使用Observable監聽valueChanges ，則可以使用patchValue（）方法設置禁用字段的值，如下所示。

calculateAnnualIncome(preTax){
  let output = preTax * 14 * ((100 - 21) / 100);
  this.income.patchValue({annualIncome:output});
  console.log("Value from Input Filed",this.income.controls.annualIncome.value)

}

您可以使用來訪問禁用字段的值

this.income.controls.annualIncome.value //output:13404.720000000001

要么

this.form.get('income.annualIncome').value

我以不同的方式解決了您的問題，請看一下這個stackblitz示例