¿Cómo sé cuándo el control de formulario personalizado está marcado como prístino en Angular?

Solución:

Después de una investigación exhaustiva, descubrí que Angular no proporciona específicamente esta funcionalidad. Publiqué un problema en el repositorio oficial con respecto a esto y obtuvo el estado de solicitud de función. Espero que se implemente en un futuro próximo.

---

Hasta entonces, aquí está dos posibles soluciones:

Monos parcheando el 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!');
    }
  }

}

Observando los cambios con ngDoCheck

Tenga en cuenta que esta solución podría tener un rendimiento menor, pero le brinda una mayor flexibilidad, ya que puede monitorear cuando se cambia el estado original. En la solución anterior, se le notificará solo cuando markAsPristine() se llama.

@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!');
      }
    }
  }

}

---

Y si necesita acceder al FormControl instancia de su componente, consulte esta pregunta: Obtenga acceso a FormControl desde el componente de formulario personalizado en Angular.

---

---

Utiliza Nuestro Buscador