FormControllWrapperValueAccessor

[kbrilla]

Hi, I really like the idea behind this project and especially the touch$ (but would call it touched$ ;-) it's dirty, it's enabled, it's disabled, it's pristine and ** it's touched**, etc so touch is a bit out of place ) feature.
So what I would propose is to add an abstract class like ControlValueAccessor for use with a Control simply wrapping around a FormGroup (AbstractFormControl actually).

Let's say I have the usual Person object. I want to create a ControlValueAccessor that would wrap around the FormGroup. So finally I could use this component as a form component.

It's much easier now with your reactive-forms but would be even better with an abstract FormControllWrapperValueAccessor.

If I'm not clear enough I can elaborate or maybe create a simple proof of concept.

Idea coming from https:https://timdeschryver.dev/blog/working-with-angular-forms-in-an-enterprise-environment

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

[kbrilla]

A very simple and naive implementation:

import {ControlValueAccessor } from '@angular/forms';
import { FormGroup} from "@ngneat/reactive-forms";
import {map, takeUntil} from "rxjs/operators";
import {Subject} from "rxjs";
import {OnDestroy} from "@angular/core";

export abstract class FormGroupWrapperValueAccessor<T = any, F = any> implements ControlValueAccessor, OnDestroy{
  public form: FormGroup<F>;
  private destroyed$ = new Subject();

  abstract provideForm() : FormGroup<F>;
  abstract mapFromFormValue: (R) => T;
  abstract mapToFormValue: (T) => F;
  
  constructor(){
    this.form = this.provideForm();
  }
  writeValue(value: T): void {
    this.form.setValue(this.mapToFormValue(value), { emitEvent: false} );
  }

  registerOnChange(fn: <T>(value: (T | null)) => void): void {
    this.form.value$.pipe(takeUntil(this.destroyed$), map(this.mapFromFormValue)).subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    this.form.touch$.pipe(takeUntil(this.destroyed$)).subscribe(fn);
  }

  setDisabledState(isDisabled: boolean): void {
    this.form.setDisable(isDisabled);
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
  }

}

[NetanelBasal]

Agree about the touch thing. Can you give a more concrete example to your suggestion, please?

[itayod]

@criskrzysiu that actually sounds interesting and can save some boilerplate, would you like to create us a POC as you suggested?