所以，我想在我的项目中实现动态表单，即使用ngx-Admin（Nebular），但我不断获得'dynamic-bootstrap-form' is not a known element，即使它被打包在vendor.bundle.js上......我尝试使用Angular 5和4版本，看看是否有什么问题，因为我无法弄清楚是什么，我来这里寻求帮助。
一些相关文件：
的 app.module.ts
import {APP_BASE_HREF} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
import {CoreModule} from './@core/core.module';
// Custom form builder
import {DynamicFormsCoreModule} from '@ng-dynamic-forms/core';
import {DynamicFormsBootstrapUIModule} from '@ng-dynamic-forms/ui-bootstrap';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {ThemeModule} from './@theme/theme.module';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NB_AUTH_TOKEN_WRAPPER_TOKEN, NbAuthJWTToken} from '@nebular/auth';
import {AuthGuard} from './auth-guard.service';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
AppRoutingModule,
DynamicFormsCoreModule.forRoot(),
DynamicFormsBootstrapUIModule,
NgbModule.forRoot(),
ThemeModule.forRoot(),
CoreModule.forRoot(),
],
bootstrap: [AppComponent],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
{provide: NB_AUTH_TOKEN_WRAPPER_TOKEN, useClass: NbAuthJWTToken},
AuthGuard,
],
})
export class AppModule {
}
用户-form.component.ts
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
import {
DynamicFormArrayModel,
DynamicFormControlModel,
DynamicFormService,
DynamicInputModel,
} from '@ng-dynamic-forms/core';
import { USER_FORM_MODEL } from '../../../forms/user/user-form.model';
@Component({
selector: 'ngx-user-form',
templateUrl: './cadastro-usuario.component.html',
})
export class CadastroUsuarioComponent implements OnInit {
formModel: DynamicFormControlModel[] = USER_FORM_MODEL;
formGroup: FormGroup;
constructor(private formService: DynamicFormService) {}
ngOnInit() {
this.formGroup = this.formService.createFormGroup(this.formModel);
}
}
用户-form.component.html
<div class="row">
<div class="col-lg-12">
<nb-card>
<nb-card-header>User Form</nb-card-header>
<nb-card-body>
<form [formGroup]="formGroup">
<dynamic-bootstrap-form [group]="formGroup"
[model]="formModel"></dynamic-bootstrap-form>
</form>
</nb-card-body>
</nb-card>
</div>
</div>
用户-form.model.ts
import {
DynamicFormControlModel,
DynamicCheckboxModel,
DynamicInputModel,
DynamicRadioGroupModel,
DynamicFormGroupModel,
} from '@ng-dynamic-forms/core';
export const USER_FORM_MODEL: DynamicFormControlModel[] = [
new DynamicInputModel({
id: 'user-name',
label: 'Full Name',
validators: {
required: true,
minLenght: 10,
},
}),
];
的package.json
{
"name": "ngx-admin",
"version": "2.0.1",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/akveo/ngx-admin.git"
},
"bugs": {
"url": "https://github.com/akveo/ngx-admin/issues"
},
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"start": "ng serve",
"build": "ng build",
"build:prod": "npm run build -- --prod --aot",
"test": "ng test -sr",
"test:coverage": "rimraf coverage && npm run test -- -cc",
"lint": "ng lint --type-check",
"lint:fix": "ng lint --fix",
"lint:styles": "stylelint ./src/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "ng e2e",
"docs": "compodoc -p src/tsconfig.app.json -d docs",
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
"prepush": "npm run lint:ci",
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
"deploy": "./deploy.sh"
},
"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@angular/animations": "4.4.6",
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
"@asymmetrik/angular2-leaflet": "2.1.4",
"@nebular/auth": "2.0.0-rc.3",
"@nebular/theme": "2.0.0-rc.3",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"@ng-dynamic-forms/core": "^1.4.34",
"@ng-dynamic-forms/ui-bootstrap": "^1.4.34",
"@swimlane/ngx-charts": "5.2.0",
"angular2-chartjs": "0.3.0",
"angular2-toaster": "4.0.0",
"bootstrap": "4.0.0-beta.2",
"chart.js": "2.5.0",
"ckeditor": "4.6.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"d3": "4.8.0",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.0.3",
"nebular-icons": "1.0.6",
"ng2-ckeditor": "1.1.9",
"ng2-smart-table": "1.1.0",
"ng2-tree": "2.0.0-alpha.10",
"ngx-echarts": "1.2.2",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "5.5.0",
"socicon": "3.0.5",
"tether": "1.4.0",
"tinymce": "4.5.7",
"typeface-exo": "0.0.22",
"web-animations-js": "2.2.5",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/cli": "1.4.9",
"@angular/compiler-cli": "4.4.6",
"@angular/language-service": "4.4.6",
"@compodoc/compodoc": "1.0.1",
"@types/d3-color": "1.0.4",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.0.60",
"@types/node": "6.0.90",
"codelyzer": "3.2.1",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"npm-run-all": "4.0.2",
"protractor": "5.1.2",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "5.7.0",
"tslint-language-service": "0.9.6",
"typescript": "2.3.4"
}
}
感谢任何帮助！
答案 0 :(得分：0)
您必须导入动态引导表格＆＃39;模块到src/app/@theme文件夹中的theme.module.ts。