2

我正在按照https://github.com/formio/angular-formio/wiki/Form-Builder的说明进行操作，即使没有客户端错误，我也没有看到在我的页面上呈现任何表单生成器。

这是我看到的：https ://imgur.com/a/9CL7oRF 由于某种原因，表单生成器被呈现为 0x0。

我的代码：

问卷-builder.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'questionnaire-builder',
  templateUrl: './questionnaire-builder.component.html',
  styleUrls: ['./questionnaire-builder.component.css']
})
export class QuestionnaireBuilderComponent{
  @ViewChild('json', {static: true}) jsonElement?: ElementRef;
  public form: Object = {components: []};

  onChange(event) {
    this.jsonElement.nativeElement.innerHTML = '';
    this.jsonElement.nativeElement.appendChild(
        document.createTextNode(JSON.stringify(event.form, null, 4)));
  }
}

问卷-builder.component.html

<p>Is form-builder working?</p>

<form-builder [form]="{
  components: []
}"></form-builder>


<form-builder [form]="form" (change)="onChange($event)"></form-builder>
<div class="well jsonviewer">
  <pre id="json"><code class="language-json" #json></code></pre>
</div>

问卷.module.ts

...
import {FormioModule} from 'angular-formio';
import {MatFormioModule} from 'angular-material-formio';

import {QuestionnaireBuilderComponent} from './questionnaire-builder/questionnaire-builder.component';

@NgModule({
  declarations: [
    QuestionnaireBuilderComponent,
  ],
  exports: [],
  entryComponents: [
    QuestionnaireBuilderComponent,
  ],
  imports: [
...
    MatFormioModule,
    FormioModule,
  ],
})
export class QuestionnaireModule {
}
4

2 回答 2

0

我不认为同时使用 MatFormioModule 和 FormioModule 是理想的，我必须同时使用两者之一才能呈现我的表单和表单构建器，尝试一次使用一个，希望这有帮助。

于 2019-12-27T15:34:03.217 回答
0

从您的 html 中删除另一个<form-builder>模板。

试试这个，看看是否有任何渲染。

<form-builder [form]="form" (change)="onChange($event)"></form-builder>
<div class="well jsonviewer">
  <pre id="json"><code class="language-json" #json></code></pre>
</div>

于 2019-12-03T19:36:38.717 回答