Custom Angular fields

[merobal]

Helper classes to create and register custom fields based on any Angular component implemented as field input (with value Input and valueChange Output).

It creates a webcomponent (Angular Element), then creates a custom field class using that webcomponent as the input element.

Usage example:

import { Injector } from '@angular/core';
import { FormioCustomComponentInfo, registerCustomFormioComponent } from 'angular-formio';
import { DatepickerComponent } from './datepicker.component';
import { datePickerEditForm } from './edit-form';

const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
  type: 'mydatepicker',
  selector: 'my-datepicker',
  title: 'Datepicker',
  group: 'basic',
  icon: 'fa fa-calendar',
  editForm: datePickerEditForm,
};

export function registerDatepickerComponent(injector: Injector) {
  registerCustomFormioComponent(COMPONENT_OPTIONS, DatepickerComponent, injector);
}

And call the registerDatepickerComponent inside a constructor of any NgModule with the Injector.

I will update the demo app to provide more live examples once it's merged and released.

[travist]

This is great work! I will be releasing 4.2.0 soon, so this may need to be rebased. I will also need some time to test out what is going on with this change, but from what I can tell, this is an amazing contribution!

[travist]

Can we make this the last component and also optional so we can preserve reverse compatibility? Example: The Angular Material library would break with this change @ https://github.com/formio/angular-material-formio/blob/master/projects/angular-material-formio/src/lib/formio.component.ts#L34

[merobal]

Yes, just updated

[merobal]

@travist I created a quick demo, you can check here: https://angular-formio-custom-demo.netlify.com/
I added a Rating component based on https://ng-bootstrap.github.io/#/components/rating/examples

You can check the code here as well: merobal/angular-formio-custom-demo@8901005

That commit shows all the necessary polyfills and setup.

[travist]

This is great and thank you! I am currently doing a few patch releases (some more coming this week) and then once I get through those, I will be including this in this library. This really is a fantastic addition to this library!

[travist]

Thanks again for this contribution! Do you have access to contribute to the Wiki of this library? That would be a great place to write some documentation about it.

[travist]

This is currently released in 4.3.0-beta.1

[merobal]

Only contributors can edit the wiki, if you add me I add some docs about this feature

[merobal]

@travist could you please create a new beta-2 version where you set the formiojs to the latest version?

Also would it be okay if I write the docs in markdown for the wiki and I send to you via email?

[travist]

@merobal I added you to the contributors list so you should be able to write some documentation over this now.

I will also release a new version with latest renderer. We are working on a new build with many bug fixes (should get released by tomorrow) so I will forge a new version of this library when that is done.

[merobal]

Thanks!

[merobal]

Docs added: https://github.com/formio/angular-formio/wiki/Custom-Components-with-Angular-Elements

[travist]

@merobal I am pretty sure this broke the build for those on Angular 7.

#412

I am going to do some investigation, but it seems that those who are on the previous release (before we pulled this in) worked in Angular 7, but after this commit, no longer works. I would hate to have to revert (or fork) this repo, but we have many people still on Angular 7 and unable to upgrade. Any suggestions on what was included that would have broken Angular 7?