Custom Form Control sample example Needs

[NurdinDev]

I'm submitting a

[ ] Bug / Regression
[ ] Feature Request / Proposal
[x] Question

I'm using

NG Dynamic Forms Version: `X.Y.Z`

[ ] Basic UI
[x] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[ ] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

Hello, I'm trying to make a custom control but at some point, I didn't understand as well, if there is example it's good because the documentation not explains enough.

for the hard part I didn't get it is: in corresponding DynamicFormControlModel what should we put ?

@Input() model: /* corresponding DynamicFormControlModel */;

providers: [
  {
    provide: DYNAMIC_FORM_CONTROL_MAP_FN,
    useValue: (model: DynamicFormControlModel): Type<DynamicFormControl> | null  => {

      switch (model.type) {

        case /* corresponding DynamicFormControlModel */:
          return MyDynamicCustomFormControlComponent;

        }
     }
  }
]

[udos86]

@NuruddinBadawi

You need to state which DynamicFormControlModel should map to your custom component.

For example if you'd like to replace the default select component of a certain UI package you would do this:

@Input() model: DynamicSelectModel;

providers: [
  {
    provide: DYNAMIC_FORM_CONTROL_MAP_FN,
    useValue: (model: DynamicFormControlModel): Type<DynamicFormControl> | null  => {

      switch (model.type) {

        case DynamicSelectModel:
          return MyDynamicCustomFormControlComponent;

        }
     }
  }
]

[NurdinDev]

Thanks to your replay @udos86, but if I need to make new type not override, for example, I have ng-select component custom view to show colors in the list, it's possible to create a new type and use my component?

[udos86]

@NuruddinBadawi

Yes, it technically should be possible to introduce a custom DynamicFormControlModel.

But please beware that there's currently no support for recreating a custom dynamic form control model from JSON.

[maroy1986]

@udos86 As for the Recreating a custom dynamic form control model from JSON, is this something you plan to implement one day for custom dynamic form model or the complexity of supporting it could lead to problems you think are not worth the effort?

I'm just asking a question here. We are having a similar need at the moment, I'm evaluating our options.

Thanks!

[ironbirdie]

I'm trying to build a custom component based on the autocomplete from primeng with a rest-backend to get a list of suggestions, do u have an example on how to build your own model?

[ntziolis]

@udos86 Can you clarify the below

But please beware that there's currently no support for recreating a custom dynamic form control model from JSON.

Where does this limitation come from? I'm happy to put in some work to enable this as this is a key requirement for us.

Here is what we are trying to achieve:

• Build custom custom controls (for example a lookup control that needs additional data parameters to figure out where to get its data from)
• Create a form leveraging these custom controls from JSON (we generate this json inkl parameters for lookup fields from a datamodel with annotations hence we cannot use the coding route)

At first glance introducing custom modelType would be the sensible route but I'm open to other suggestions. Again also happy to put in some time to enable this scenario if its not possible as for now.

[ntziolis]

Did some digging:

ng-dynamic-forms/packages/core/src/service/dynamic-form.service.ts

Line 406 in edd11d9

throw new Error(`unknown form control model type defined on JSON object with id "${model.id}"`);

Would be the right approach to implement DYNAMIC_FORM_CONTROL_MODEL_MAP_FN similar to the ones for form controls?

[darrenmothersele]

Yes, it technically should be possible to introduce a custom DynamicFormControlModel.

But please beware that there's currently no support for recreating a custom dynamic form control model from JSON.

I have a proof-of-concept working where I can create a dynamic form from JSON with a custom control.

I implemented a custom DynamicFormControlModel by looking at how the Input control was implemented. I extended DynamicInputControlModel<string> and also implemented a config class to extend DynamicInputControlModelConfig<string>.

In order to get loading from JSON working, I had to extend DynamicFormService and re-implement fromJSON(), adding in my custom type to the switch statement:

export class MyFormService extends DynamicFormService {
    ...

    fromJSON(json: string | object[]): DynamicFormModel | never {
        ...
        case CUSTOM_DYNAMIC_FORM_CONTROL_TYPE:
          formModel.push(new MyCustomModel(model, layout));
          break;
       ...
    }
}

Then I set my app to use my overriden DynamicFormService class via app.module.ts providers:

  providers: [
    {
      provide: DYNAMIC_FORM_CONTROL_MAP_FN,
      useValue: (model: DynamicFormControlModel): Type<DynamicFormControl> | null  => {
        switch (model.type) {
          case CUSTOM_DYNAMIC_FORM_CONTROL_TYPE:
            return MyDynamicCustomFormControlComponent;
        }
      }
    },
    {
      provide: DynamicFormService,
      useClass: MyFormService
    }
  ],

This works, but it doesn't feel like the most robust way of doing this.

[danielleiszen]

The documentation states that by using this approach we can override the default mapping however, it is not clear for the first sight that this library is NOT extendable. I choose this library because I saw the custom controls section in documentation and it seemed to do exactly what I wanted. Only when got familiar with the library I had to realize that I have to implement the actual behavior myself. I find the documentation to be misleading in this regard.

I read a few issues here and I saw that a lot of us would be happy to contribute in order to make this library better, but there was no answer from the maintainer side. I am a bit disappointed about this. I had to implement visibility relations myself and I am going to implement true customization as well, because we need this behavior in our project.

It would also be good if I was able to use my forked source in my project, but due to the fact that the library contains multiple packages I did not find a way to include this git in packages.json. I had to copy and paste the relevant parts of source code into my project - which sounds ridiculous.

So if anyone can share some solution about these problems, I would be happy to share my contribution to this library. Thx