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 is that values from disabled controls are missing when form valueChanges are emitted. I've set a basic example.

When the checkbox is checked and the email input is disabled, there is no form control value logged. But I'd like to get ALL form values.

Answer 1

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

Answer 2

this.form.valueChanges
      .pipe(map((_) => this.form.getRawValue()))
      .subscribe(res => {
        console.log(res)
      });

Answer 3

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.