Search code examples
angulartypescriptngx-formly

How can I add a custom wrapper to NGX-Formly with references the field model?

I'm trying to implement a wrapper for NGX-Formly fields which features a button that calls a handler function passing a reference to the wrapped field's model. How can I inject this reference and pass it to the handler function (which e.g. opens a popup or similar)?

My objective is to create a drag&drop form builder.

Following this example I have implemented a wrapper like that:

<div class="formly-wrapper">
 <label>{{ to.label }}</label>
  <button (click)="myHandlerFunction()">Edit</button>
  <ng-container #fieldComponent></ng-container>
</div>

How can I get the field definition or at least a reference to the wrapped field?

Solution

  • After some trying back and forth I found that you can pass field in the wrapper like so:

    <button (click)="myHandlerFunction(field)">Edit</button>

    This gives you the complete FieldConfig whereas to is just an alias for TemplateOptions.