Single field sub form interface

[ntziolis]

Intent:
Allow for easy implementation of single value (no form group) custom components that implement value accessor interface. This would allow to create smart components like selects / autocompletes that load data themselves that can easily be reused across the application
Think customer / user / country pickers or any commonly used domain specific pickers you can think of.

Issue today:

• NgxSubFormComponent requires a complex type as generic parameter for class fields / methods to make sense formControlNames etc.
• Its possible to use NgxSubFormRemapComponent to wrap the single value into a form group and back but it generates boilerplate that is redundant and feels unnecessary especially for new devs joining a project

Feature request:
Create an additional interface that exposes the same functionality as NgxSubFormComponent or NgxSubFormRemapComponent but all methods / fields should be singular formControlName / formControlValue etc.

UPDATE:
https://stackblitz.com/edit/issue-demo-ngx-sub-form-single-value

Notes:

• checkout the GenericLookupComponent
• here you can see how the single value is wrapped / unwrapped

[maxime1992]

Hi @ntziolis, could you please create a small repro on Stackblitz https://stackblitz.com/fork/angular so we can understand if there's already an easy way of doing it and otherwise it'll be useful to discuss around that example?

Thanks

[ntziolis]

Will do

[ntziolis]

Updated the issue with link to stackblitz and some notes

[maxime1992]

@ntziolis I'm not saying this will happen but I'm considering the option.

I think we could have for ex NgxSubFormSingleValueComponent (please propose a better name if you can think of any).

Here's an example of how it'd look:

export class MySubForm extends NgxSubFormSingleValueComponent<T> {
  protected getFormControls(): SingleFieldControl {
    return {
      control: new FormControl()
    }
  }
}

the variable name control could be something else but it should be static (we're simply trying to bypass the remap here right?).

Let me know what you think and also if you've got better names for the variables/classes 👍

[ntziolis]

@maxime1992 Yes that's 100% what I was looking for and in fact what I ended up doing (see below), key things for us were:

• auto transform (i think you got that covered)
• getFormControl function that is already implemented in my base class already as 99% use cases is a single standard form control. But I'd totally understand if you would not wanne have that in a lib base class

In regards to naming I think your name is better than the one I came up with ;)

import { AbstractControl, FormControl } from '@angular/forms';
import { Controls, NgxSubFormRemapComponent } from 'ngx-sub-form';

export interface WrappedControlForm<TControl> {
  innerControl: TControl;
}

export abstract class NgxSingleFieldSubFormComponent<FormInterface> extends NgxSubFormRemapComponent<FormInterface, WrappedControlForm<FormInterface>> {
  protected getFormControl(): AbstractControl {
    return new FormControl(null);
  }

  protected getFormControls(): Controls<WrappedControlForm<FormInterface>> {
    return {
      innerControl: this.getFormControl()
    };
  }

  protected transformToFormGroup(
    innerControl: FormInterface
  ): WrappedControlForm<FormInterface> {
    return innerControl ? { innerControl } : null;
  }

  protected transformFromFormGroup(
    formValue: WrappedControlForm<FormInterface>
  ): FormInterface {
    return formValue ? formValue.innerControl : null;
  }
}

[ntziolis]

To better understand the use cases for single value sub forms and as mentioned in #139 we have also created an additional sub form type for arrays with array related helper functionality, sample can be found here