No hook or observable member available to get latest form value after component initialised

[owen26]

There is currently onFormUpdate() hook and formGroup.valuechanges observable, but they are not called when the component gets the value from external after finish initialization.

There are indeed workarounds exist. But getting the latest form value after form initialization is still a legit scenario that is useful for this library.

[maxime1992]

Indeed there's no way for now to be aware when the form is patched by the parent.

It would be nice to have a proper hook or observable for that but the current workaround is to override the writeValue hook.

[cbleu]

I have the same type of trouble with the lib: to refresh sub-components when data are updated from an external source after the initialization (from a Rest api).
Maxime, can you explain a little bit more what is your proposal workaround with the writeValue hook and how to use it ?

[maxime1992]

Sure thing @cbleu

When using ControlValueAccessor (which is what ngx-sub-form is doing behind the scenes) when the parent update the value of a FormControl, Angular will call the writeValue hook on the children (the one implementing ControlValueAccessor).

That part is completely hidden and transparent when using ngx-sub-form, but as there's no hook (yet) to be warned when the value changes (patched by the parent) you can just hook yourself onto writeValue.

Something along the following lines:

// ...
public writeValue(obj) {
  super.writeValue(obj);

  // do what you want here
}
// ...

Is that enough for you now @cbleu? Hopefully it'll be useful until a proper feature/hook lands =)

[maxime1992]

@zakhenry I've encountered that one quite a few times and it makes the component really verbose.

Also to clarify the usage, in my case I'm passing an ID to a sub form and that sub form does access the store to retrieve a resource. When the ID changes locally (selection local to that component) it's all good. But when the ID changes upstream (from the parent) it's not fetching the new resource (at least not without the workaround).

I think it's a legitimate use case, what do you think?

If you agree, can you think of a good name for:

• a synchronous hook
• an observable that we might expose for dealing with streams in case the input might change a lot and the consumer wants to throttle or others

For the hook, we already have onFormUpdate =/
Should we make a breaking change and rename it to onLocalFormUpdate?
And the new one could be onGlobalFormUpdate?

Or we let the current one and bundle that in the next breaking change otherwise

[zakhenry]

Yea I think having a hook is useful - prob as simple as onWriteValue as that is explicit about what is happening

[maxime1992]

I'm fine with onWriteValue but I'd like something that combine both otherwise we'll end up with code duplication.

In my example above, I want to refresh the resource whenever the value as changed from the parent or locally. With hooks only I'd have to implement the fetch of the resource in both hooks.

Plus, as rxjs is the default for fetching data in most cases (ngrx, http calls, etc) I think it'd be nice to have an observable that we can subscribe to. The data flow would be much nicer IMO.

If we've got only a synchronous hook it means we'd have to subscribe there 😱
(to fetch data at least but could be nice for notifications or synchronous things)

What do you think of:

• a method onFormUpdate (already here)

• a method onWriteValue (to be added)

• a method onAnyFormUpdate (to be added)

• [maybe] an observable formUpdate$ (to be added, for consistency?)

• an observable writeValue$ (to be added)

• an observable anyFormUpdate$ (to be added)

[zakhenry]

Honestly, I think that is way overkill, and having a thinner interface at the cost of downstream verbosity is preferable.

[maxime1992]

Here's a concrete example of the boilerplate required for this to work today:

interface ResourceForm {
  resourceId: string;
}

@Component({
  selector: 'resource-control',
  templateUrl: './resource-control.component.html',
  styleUrls: ['./resource-control.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: subformComponentProviders(ResourceControlComponent),
})
export class ResourceControlComponent extends NgxSubFormRemapComponent<
  string,
  ResourceForm
> {
  private resourceIdFromParent$: Subject<string | null> = new Subject();
  public resourceId$: Observable<string> = merge(
    this.formGroupControls.resourceId.valueChanges,
    this.resourceIdFromParent$
  );

  public resource$: Observable<Resource | undefined> = this.resourceId$.pipe(
    switchMap((resourceId: string) =>
      this.resourceFacade.getResource(resourceId)
    )
  );

  constructor(private resourceFacade: ResourceFacade) {}

  public writeValue(id: string | null): void {
    super.writeValue(id);

    this.resourceIdFromParent$.next(id);
  }

  // skipped everything related to ngx-sub-form on purpose to keep
  // the verbose part I'm trying to get rid of only
}

The way I think it should be:

interface ResourceForm {
  resourceId: string;
}

@Component({
  selector: 'resource-control',
  templateUrl: './resource-control.component.html',
  styleUrls: ['./resource-control.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: subformComponentProviders(ResourceControlComponent),
})
export class ResourceControlComponent extends NgxSubFormRemapComponent<
  string,
  ResourceForm
> {
  public resource$: Observable<Resource | undefined> = this.anyFormUpdate$.pipe(
    switchMap(formValue =>
      this.resourceFacade.getResource(formValue.resourceId)
    )
  );

  constructor(private resourceFacade: ResourceFacade) {}

  // skipped everything related to ngx-sub-form on purpose to keep
  // the verbose part I'm trying to get rid of only
}

What would you do?