Search code examples
angularangular-forms

Angular 5 FormControl Attribute doesn't return values when disabled

I'm creating a Reactive Form like this:

this.modelForm = new FormGroup({
  number: new FormControl({value: '', disabled: true}),
  otherValue1: new FormControl({value: '', disabled: false}),
  otherValue2: new FormControl({value: '', disabled: true}),
  detail: new FormArray([])
});

Now, when i try to get the current value of the form I only get:

this.modelForm.value => 
Object: { otherValue1: '' , detail:[] }

Every field with the "disabled:true" attribute is omitted from the returned object.

How do I make them being returned by that method?

Note: I disable the fields to get a coherent view with the other input forms. It look so much better and I don't think one field is an overhead to the performance

Solution

  • This could be due to the definition of forms by W3C (I'd expect that angular has a similar approach as "old HTML forms"). Disable an element has the following effects:

    • Disabled controls do not receive focus.
    • Disabled controls are skipped in tabbing navigation.
    • Disabled controls cannot be successful.
    • Disabled controls will not submit data.

    This "should" be enforced by the browser. You should instead use the Raw Values in angular which will ignore the disabled status.