角反应形式禁用输入字段答案

【问题标题】：Angular reactive form disabled input field角反应形式禁用输入字段
【发布时间】：2018-10-18 19:47:23
【问题描述】：

我有一个反应形式的组件

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

虽然年收入字段已禁用，但我已绑定到返回数字的方法

<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: ""

如何接收字段的实际值？

【问题讨论】：

您是否尝试订阅字段值？ like this.form.get('income.annualIncome').valueChanges.subscribe(val => { consonle.log("income",val); });

标签： angular

【解决方案1】：

在你的 .ts 中，

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

【讨论】：

【解决方案2】：

在 Angular 中，如果您想获取所有值，包括您应该使用的禁用控件：

this.form.getRawValue();

或另一种方式使其只读而不是禁用。这样您就可以按预期获得该控件的值。

【讨论】：

【解决方案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 example

【讨论】：