form.io: Not rendering custom component

Question

I am trying to use form.io with a custom component called MeComponent but it is not rendering it. I am not able to figure out what I am missing. This is what I've tried.

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormioModule } from "angular-formio";

import { FormSchemaService } from "./services/form-schema.service";

import { AppComponent } from "./app.component";
import { MeComponent } from "./me/me.component";

@NgModule({
  declarations: [MeComponent, AppComponent],
  imports: [BrowserModule, FormioModule],
  providers: [FormSchemaService],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
import { FormSchemaService } from "./services/form-schema.service";
import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public title = "Playing with form.io";
  public data = [];

  public formConfig = {
    submission: {
      data: {
        firstName: "Joe",
        lastName: "Smith"
      }
    },
    options: {
      alerts: {
        submitMessage: "Thank you for something."
      },
      errors: {
        message: "Something is not right. Please call 911."
      },
      hooks: {
        beforeSubmit: ($event, callback) => {
          console.log("form.io --> beforeSubmit: ", $event);
          setTimeout(() => {
            console.log(callback);
            // Callback with a possibly manipulated submission.
            //  callback("Something wen wrong", null);
            // callback(null, $event);
            callback(
              {
                message: "Something bad happened.",
                component: null
              },
              null
            );
          }, 1000);
        }
      }
    }
  };

  constructor(private schemaService: FormSchemaService) {}

  public ngOnInit() {
    const sub$ = this.schemaService.getFormSchema().subscribe(data => {
      this.data = data;
      sub$.unsubscribe();
    });
  }

  public onSubmit($event) {
    console.log($event);
  }
}

app.component.html

<h2>{{title}}</h2>
<hr>
<formio [form]="data" (submit)="onSubmit($event)" [submission]="formConfig.submission" [options]="formConfig.options"></formio>

Here's the service which provides data:

form-schema.service.ts

import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";

import "rxjs/add/operator/delay";
import "rxjs/add/observable/of";

const data = {
  title: "My Test Form",
  components: [
    {
      type: "textfield",
      input: true,
      tableView: true,
      inputType: "text",
      inputMask: "",
      label: "First Name",
      key: "firstName",
      placeholder: "Enter your first name",
      prefix: "",
      suffix: "",
      multiple: false,
      customClass: "text-loud",
      protected: false,
      unique: false,
      persistent: true,
      validate: {
        required: true,
        minLength: 2,
        maxLength: 10,
        pattern: "",
        custom: "",
        customPrivate: false
      },
      conditional: {
        show: "",
        when: null,
        eq: ""
      }
    },
    {
      type: "textfield",
      input: true,
      tableView: true,
      inputType: "text",
      inputMask: "",
      label: "Last Name",
      key: "lastName",
      placeholder: "Enter your last name",
      prefix: "",
      suffix: "",
      multiple: false,
      protected: false,
      unique: false,
      persistent: true,
      validate: {
        required: true,
        minLength: 2,
        maxLength: 10,
        pattern: "",
        custom: "",
        customPrivate: false
      },
      conditional: {
        show: "",
        when: null,
        eq: ""
      }
    },
    {
      input: true,
      tableView: true,
      label: "Country",
      key: "country",
      placeholder: "Select a country",
      data: {
        json: [
          {
            name: "Afghanistan",
            code: "AF",
            $$hashKey: "object:1299"
          },
          {
            name: "Åland Islands",
            code: "AX",
            $$hashKey: "object:1300"
          },
          {
            name: "Albania",
            code: "AL",
            $$hashKey: "object:1301"
          },
          {
            name: "Algeria",
            code: "DZ",
            $$hashKey: "object:1302"
          },
          {
            name: "American Samoa",
            code: "AS",
            $$hashKey: "object:1303"
          },
          {
            name: "AndorrA",
            code: "AD",
            $$hashKey: "object:1304"
          },
          {
            name: "Angola",
            code: "AO"
          },
          {
            name: "Anguilla",
            code: "AI"
          },
          {
            name: "Antarctica",
            code: "AQ"
          },
          {
            name: "Antigua and Barbuda",
            code: "AG"
          },
          {
            name: "Argentina",
            code: "AR"
          },
          {
            name: "Armenia",
            code: "AM"
          },
          {
            name: "Aruba",
            code: "AW"
          },
          {
            name: "Australia",
            code: "AU"
          },
          {
            name: "Austria",
            code: "AT",
          },
          {
            name: "Azerbaijan",
            code: "AZ"
          },
          {
            name: "Bahamas",
            code: "BS",
          },
          {
            name: "Somalia",
            code: "SO"
          },
          {
            name: "South Africa",
            code: "ZA"
          },
          {
            name: "South Georgia and the South Sandwich Islands",
            code: "GS"
          },
          {
            name: "Spain",
            code: "ES"
          },
          {
            name: "Sri Lanka",
            code: "LK"
          },
          {
            name: "Sudan",
            code: "SD"
          },
          {
            name: "Suriname",
            code: "SR"
          },
          {
            name: "Svalbard and Jan Mayen",
            code: "SJ"
          },
          {
            name: "Swaziland",
            code: "SZ"
          },
          {
            name: "Sweden",
            code: "SE"
          },
          {
            name: "Switzerland",
            code: "CH"
          },
          {
            name: "Syrian Arab Republic",
            code: "SY"
          },
          {
            name: "Taiwan, Province of China",
            code: "TW"
          },
          {
            name: "Tajikistan",
            code: "TJ"
          },
          {
            name: "Tanzania, United Republic of",
            code: "TZ"
          },
          {
            name: "Thailand",
            code: "TH"
          },
          {
            name: "Timor-Leste",
            code: "TL"
          },
          {
            name: "Togo",
            code: "TG"
          },
          {
            name: "Tokelau",
            code: "TK"
          },
          {
            name: "Tonga",
            code: "TO"
          },
          {
            name: "Trinidad and Tobago",
            code: "TT"
          },
          {
            name: "Tunisia",
            code: "TN"
          },
          {
            name: "Turkey",
            code: "TR"
          },
          {
            name: "Turkmenistan",
            code: "TM"
          },
          {
            name: "Turks and Caicos Islands",
            code: "TC"
          },
          {
            name: "Tuvalu",
            code: "TV"
          },
          {
            name: "Uganda",
            code: "UG"
          },
          {
            name: "Ukraine",
            code: "UA"
          },
          {
            name: "United Arab Emirates",
            code: "AE"
          },
          {
            name: "United Kingdom",
            code: "GB"
          },
          {
            name: "United States",
            code: "US"
          },
          {
            name: "United States Minor Outlying Islands",
            code: "UM"
          },
          {
            name: "Uruguay",
            code: "UY"
          },
          {
            name: "Uzbekistan",
            code: "UZ"
          },
          {
            name: "Vanuatu",
            code: "VU"
          },
          {
            name: "Venezuela",
            code: "VE"
          },
          {
            name: "Viet Nam",
            code: "VN"
          },
          {
            name: "Virgin Islands, British",
            code: "VG"
          },
          {
            name: "Virgin Islands, U.S.",
            code: "VI"
          },
          {
            name: "Wallis and Futuna",
            code: "WF"
          },
          {
            name: "Western Sahara",
            code: "EH"
          },
          {
            name: "Yemen",
            code: "YE"
          },
          {
            name: "Zambia",
            code: "ZM"
          },
          {
            name: "Zimbabwe",
            code: "ZW"
          }
        ],
        url: "",
        resource: "",
        custom: "",
        headers: [
          {
            value: "",
            key: ""
          }
        ]
      },
      dataSrc: "json",
      valueProperty: "code",
      defaultValue: "",
      refreshOn: "",
      filter: "none",
      authenticate: false,
      template: "<span>{{ item.name }}</span>",
      multiple: false,
      protected: false,
      unique: false,
      persistent: true,
      hidden: false,
      clearOnHide: true,
      validate: {
        required: true
      },
      type: "select",
      $$hashKey: "object:565",
      hideLabel: false,
      labelPosition: "top",
      tags: [],
      conditional: {
        show: "",
        when: null,
        eq: ""
      },
      lockKey: true,
      limit: ""
    },
    {
      input: true,
      label: "Submit",
      tableView: false,
      key: "submit",
      size: "lg",
      leftIcon: "",
      rightIcon: "",
      block: true,
      action: "submit",
      disableOnInvalid: true,
      theme: "primary",
      type: "button"
    },
    {
      type: "me", // MeComponent
      tableView: true,
      persistent: true,
      unique: false,
      protected: false,
      defaultValue: "",
      input: true
    }
  ]
};

@Injectable()
export class FormSchemaService {
  constructor() {}

  public getFormSchema(): Observable<any> {
    return Observable.of(data).delay(1000);
  }
}

me.component.ts

import { Formio } from "formiojs/full";
import { Component, OnInit } from "@angular/core";
import {
  FormioResourceService,
  FormioResourceViewComponent,
  FormioResourceConfig
} from "angular-formio/resource";
import { FormioAppConfig } from "angular-formio";

@Component({
  template: `
  <p>Me Component</p>
  `
})
export class MeComponent extends FormioResourceViewComponent implements OnInit {
  constructor(
    public service: FormioResourceService,
    public config: FormioResourceConfig
  ) {
    super(service, config);
    console.log(service, config);
  }

  ngOnInit() {
    console.log("MeComponent --> ", this.service.resource);
  }
}

Formio.registerComponent("me", MeComponent);

Can anyone please help me on this? Thanks.

Answer 1

In order to use your custom component in Formio, you have to register your component where it is being used(consumed), preferrably in the constructor of your angular component. For e.g.:-

constructor(    
  ) {
      Formio.registerComponent('custom', CustomComponent);
     Formio.registerComponent('question', QuestionnaireComponent);
     Formio.registerComponent('autotext', AutoTextRendererComponent);
  }

Answer 2

import { BaseComponent } from 'formiojs/build/components/base/Base';
import { Formio } from 'formiojs/full';

export class CustomComponent extends BaseComponent {
  rows: string;
constructor(component, options, data) {
super(component, options, data);
this.rows = "";

}
elementInfo() {
    let info = super.elementInfo();
    console.log('sddsd');
    info.type = 'input';
    info.changeEvent = 'input';

    return info;
  }
  build(){
    super.build();
    let ele = super.renderTemplate("<div id='custom'>name</div>", {});
    let element = super.getElement();
    element.appendChild(ele);
  }
}

Answer 3

The components that you register within Formio.registerComponent are not Angular components, but rather components that must derive from the BaseComponent found @ https://github.com/formio/formio.js/blob/master/src/components/base/Base.js.

Because of this, your code for the custom component will be done outside of the Angular framework, but will still function when it is rendered using Angular. Here is an example.

import { BaseComponent } from 'formiojs/src/components/base/Base';
export class CustomComponent extends BaseComponent {
  elementInfo() {
    let info = super.elementInfo();
    info.type = 'input';
    info.changeEvent = 'input';
    return info;
  }
}

Formio.registerComponent('custom', CustomComponent);