form.valueChanges doesn't emit values for disabled controls

Question

I have an Angular Reactive form. I subscribe to its value changes and will emit changes to parent component. Some of the controls might get disabled by the user. The problem

Answer 1

The value from a disable input is ignored (try to submit a form with a disabled input: it won't be posted).

You can change it to 'readonly'

<input formControlName="email" [readonly]="cb.checked">
<input #cb type="checkbox" formControlName="toggleEmail">

Updated example.

Answer 2

Use the FormGroup's getRawValue() to include control values regardless of enable/disable state.

More information in the API documentation

this.myForm.valueChanges.subscribe(() => {
    this.formValues =  JSON.stringify(this.myForm.getRawValue());
});

Here is the forked example