Angular reactive form disabled input field

Question

I have a component with a reactive form

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

Although the annualIncome field is disabled i haved binded to a method that returns a number

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

The method called is:

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

Although i see the value in the field when i am trying to retrieve it it returns ""

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

output: ""

How can i receive the actual value of the field?

have you tried to subscribe to the field value ? like this.form.get('income.annualIncome').valueChanges.subscribe(val => { consonle.log("income",val); }); — Kevin ALBRECHT
– Kevin ALBRECHT, Commented Oct 18, 2018 at 10:17

Dani · Accepted Answer · 2018-10-18 10:39:18Z

2

In your .ts ,

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

answered Oct 18, 2018 at 10:39

Dani

8179 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishw Patel · Accepted Answer · 2018-10-18 10:46:29Z

1

In Angular if you want to get all the values including disabled controls you should use:

this.form.getRawValue();

Or another way to make it Readonly instead of disabled. This way you you can get value of that control as expected.

answered Oct 18, 2018 at 10:46

Vishw Patel

5492 silver badges9 bronze badges

Comments

Naresh · Accepted Answer · 2018-10-18 11:47:23Z

0

If you don't feel like listening to the valueChanges using Observable, you can use patchValue() method to set the value of the disabled field like this.

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)

}

and you can access the value of the disable field using

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

Or

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

I've solved your problem in a different way, have a look at this stackblitz example

answered Oct 18, 2018 at 11:47

Naresh

1,29113 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular reactive form disabled input field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related