How do you listen for dirty/pristine state of the form control?

I’ve posted this question on StackOverflow recently: How do I know when custom form control is marked as pristine in Angular?.

After further investigation, I’ve managed to get access to both NgModel and FormControl from my custom form component, but I can’t find any observable that I can use to actually listen for dirty/pristine state of the form control. The ControlValueAccessor is not providing any hooks for this task either.

Is it possible to watch for dirty/pristine state of the form control somehow? There must be an observable for this?

[Toxicable]

You can listen to an AbstractControl#statusChanges eg, control.statusChanges.map( state => if(state == 'VALID" { //do something })

[slavafomin]

I’ve came up with two possible workarounds for the original issue:

Monkey-patching the markAsPristine()

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, OnInit {

  private control: AbstractControl;


  ngOnInit () {
    const self = this;
    const origFunc = this.control.markAsPristine;
    this.control.markAsPristine = function () {
      origFunc.apply(this, arguments);
      console.log('Marked as pristine!');
    }
  }

}

Watching for changes with ngDoCheck

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, DoCheck {

  private control: AbstractControl;

  private pristine = true;


  ngDoCheck (): void {
    if (this.pristine !== this.control.pristine) {
      this.pristine = this.control.pristine;
      if (this.pristine) {
        console.log('Marked as pristine!');
      }
    }
  }

}

---

I’ve also updated the questions on StackOveflow:

• How do I know when custom form control is marked as pristine in Angular?
• Get access to FormControl from the custom form component in Angular