CODEWITHSUNDEEP
angularangular2-forms
Jim Culverwell
Jim Culverwell

Reputation: 2823

Angular 2 disabled controls do not get included in the form.value

I have noticed that if I disable a control on an Angular 2 reactive form then the control does not get included in the form.value. For example, if I define my form like below:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

and check the this.notelinkingForm.value, if all the controls are enabled then output would be:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

However, when some of the controls are disabled it would be:

{"Enabled":true}

Notice how the disabled controls are excluded.

My intent is that when the form changes I want to be able to pass the form.value with all the properties in it off to my rest API. This won't be possible obviously if it does not contain the disabled items.

Am I missing something here or is this the expected behavior? Is there a way to tell Angular to include the disabled items in the form.value?

Welcome your thoughts.

Upvotes: 206

Views: 86011

Answers (6)

hovado
hovado

Reputation: 4958

I find it interesting to mention that if all controls are disabled

this.form = new FormGroup({
    a: new FormControl({value: 'a', disabled: true}),
    b: new FormControl({value: 'b', disabled: true}),
    c: new FormControl({value: null, disabled: true}),
});

the entire form is also marked as disabled

this.form.disabled = true;
this.form.status = 'DISABLED';

and when we get the value of the form with this.form.value we get the value of all(!) controls and not an empty object as one would expect:

this.form.value = {
    a: 'a',
    b: 'b',
    c: null
};

Upvotes: 1

user3166530
user3166530

Reputation:

There's a two way we can get disabled form values. First

 onSubmit(){
 for (const prop in this.formControl.controls) {
      this.formControl.value[prop] = this.formControl.controls[prop].value;
    }
}

Second way You can enable form at onSubmit event

 onSubmit(){
     this.formControl.enable() 
   //Your logical/operational statement goes here

  //at last if you wish you can again disable your form like this
   this.formControl.disable();
}

Upvotes: 1

Sasxa
Sasxa

Reputation: 41314

You can use:

this.notelinkingForm.getRawValue()

From Angular docs:

If you'd like to include all values regardless of disabled status, use this method. Otherwise, the value property is the best way to get the value of the group.

Upvotes: 436

Sandro
Sandro

Reputation: 1845

If you use readonly instead of disabled it's still not editable while the data will be included in the form. But that isn't possible in all cases. E.g. it's not available for radio buttons and checkboxes. See MDN web docs. In those cases you have to apply for the other solutions provided here.

Upvotes: 5

eper
eper

Reputation: 1153

Thank you @Sasxa for getting me 80% what I needed.

For those of you looking for a solution to the same problem but for nested forms I was able to solve by changing my usual 

this.notelinkingForm.get('nestedForm').value

to 

this.notelinkingForm.getRawValue().nestedForm

Upvotes: 13

Ricardo Cayetano
Ricardo Cayetano

Reputation: 446

Another option that I use is:

this.form.controls['LinkToPreceeding'].value;

Upvotes: 20

Related Questions