CODEWITHSUNDEEP
angular
ovlis
ovlis

Reputation: 67

Angular reactive form disabled input field

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?

Upvotes: 0

Views: 269

Answers (3)

Naresh
Naresh

Reputation: 1261

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

Upvotes: 0

Vishw Patel
Vishw Patel

Reputation: 549

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.

Upvotes: 1

Dani
Dani

Reputation: 807

In your .ts , 

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

Upvotes: 2

Related Questions