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（）方法来设置禁用字段的值，如下所示。< / p>

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 example

角反应形式禁用输入字段

3 个答案: