Angular 2 disabled controls do not get included in

问题:

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.

回答1:

You can use:

this.notelinkingForm.getRawValue()

From 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.

回答2:

Another option that I use is:

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

回答3:

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