Coding⏱️ 3 min read📅 2026-06-03

How to Fix: Angular 2 disabled controls do not get included in the form.value

Angular 2 form value issue with disabled controls

Quick Answer: Use the 'disabled' option in the FormControl to include it in the form.value, or use the 'updateValueAndValidity' method on the FormGroup after setting the control's value.

📋 Table of Contents

  1. 💡 Why You Are Getting This Error
  2. 🛠️ Step-by-Step Verified Fixes
  3. 🎯 Final Words

In Angular 2, when a control is disabled on a reactive form, it does not get included in the form.value. This can cause issues with form validation and submission.

This issue affects developers who are working with forms in Angular 2 and are relying on the form.value to validate their application.

💡 Why You Are Getting This Error

  • The primary reason for this issue is that when a control is disabled, it is not included in the form.value because of how the reactive form works. The form.value only includes controls that have been touched or modified.
  • Another possible cause is that the form control's value is being set to null or undefined when it is disabled, which can also prevent it from being included in the form.value.

🛠️ Step-by-Step Verified Fixes

Enabling the disabled control

  1. Step 1: To fix this issue, you need to enable the disabled control. You can do this by removing the 'disabled' property from the form control.
  2. Step 2: For example, if your code is like this: `LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required)`, you need to change it to: `LinkToPreceeding: new FormControl(settings.LinkToPreceeding, Validators.required)`.
  3. Step 3: Alternatively, if you cannot disable the control and still want to include its value in the form.value, you can use a different approach such as using a separate variable to store the disabled control's value.

Using a separate variable to store the disabled control's value

  1. Step 1: Another way to solve this issue is by creating a new variable that stores the value of the disabled control. You can do this using the `getRawValue()` method.
  2. Step 2: For example, you can create a new variable like this: `private linkToPreceedingValue = this.notelinkingForm.get('LinkToPreceeding').value;`.
  3. Step 3: Then, when you need to include the value of the disabled control in the form.value, you can use this new variable instead.

🎯 Final Words

By enabling the disabled control or using a separate variable to store its value, you should be able to include the value of the disabled control in the form.value and avoid any issues with form validation and submission.

Did this fix your problem?

If not, try searching for specific error codes.

🔍 Search Error Database

❓ Frequently Asked Questions

🛠️ Related Fixes

How to Fix: Stuck in tutorial hell after 4 years: How do I b

Fix Stuck in tutorial hell after 4 years: How do I bui. Practice build

How to Fix: Trying to sync mutliple audio tracks to a movie

Fix Trying to sync mutliple audio tracks to a movie bu. Consider using

How to Fix: Failed to merge latest branches from upstream re

Fix Failed to merge latest branches from upstream repo. Try running 'g