我正在尝试将form.io与一个名为的自定义组件一起使用，MeComponent但它没有呈现它。我无法弄清楚我错过了什么。这是我尝试过的。
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>
这是提供数据的服务：
表单-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);
谁能帮我解决这个问题？谢谢。