我正在构建一个动态拖放表单生成器,但我找不到控制台注销表单数据的方法。下面是component.html
表单,我正在其中呈现拖放表单
<div>
<form-builder [form]="form" (change)="onChange($event)" (submit)="onSubmit($event)"></form-builder>
<div class="well jsonviewer">
<pre id="json"><code class="language-json" #json></code></pre>
</div>
</div>
这里是component.ts
,我只是想控制表单数据,然后将其发送到API进行保存。
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-user-add',
templateUrl: './user-add.component.html',
styleUrls: ['./user-add.component.css']
})
export class UserAddComponent implements OnInit {
title = 'ASW Form Builder Demo';
jsonData:any[]=[];
@ViewChild('json') jsonElement?: ElementRef;
constructor() { }
ngOnInit(): void {
}
// Publish Template
saveJsonData(data: any){
//....
console.log(data);
// do something
}
//Preview Template
previewTemplate(data: any){
this.jsonData = data;
}
public form: Object = {components: []};
onChange(event) {
console.log(event.form);
}
onSubmit(param){
console.log(param);
}
}
有谁能帮我从提交的表单中提取数据吗?我可以在表单外的另一个分区和按钮上执行此操作吗?我想使用我自己的提交按钮。或者有任何教程可以从数据库设计开始解释此操作吗?
2条答案
按热度按时间mftmpeh81#
你需要把整个表单对象附加到你的ts变量上。2下面是我使用的代码片段。
ztmd8pv52#
正如我所看到的,你正在使用asw表单生成器,这是易于使用,并创建快速开发和设计的网页表单,其中包括几个控件。
首先,您需要创建一个表单与asw表单生成器的帮助下提交按钮之后,一旦你会点击提交按钮表单生成器将发出JSON数据在提交方法。
例如:
HTML代码:
组件代码:
}
预览创建表单的HTML代码:
按钮点击和onSelectionChange方法应与下面的演示和文档https://github.com/asoftwareworld/ASW-Form-Builder的GitHub URL相同
如果您需要任何帮助,请告诉我们