标签: dynamic-forms

我试图使用jQuery UI框架重新排序动态创建的CKEditors列表,但我遇到了编辑器释放的问题.当我刚刚使用a时<textarea>,它工作得很好,但现在,在拖动操作完成后,它不会让用户写任何文本.

这是Javascript代码:

$(function() {
    $("#list").sortable({
        placeholder: 'ui-state-highlight'
    });
    $("#list").disableSelection();

    for (i=0;i<10;i++)
    {
        addEditor();
    }
});

function addEditor()
{
    alert("Hello");
    var editor_fields = document.editors.elements["editor[]"];

    var editorAmount = 0;

    if (editor_fields.length)
    {
        editorAmount = editor_fields.length;
    }
    else
    {
        editorAmount = 1;
    }

    var newElem = $('#editor_container' + editorAmount).clone().attr('id', 'editor_container' + (editorAmount + 1));

    newElem.html("<textarea class='editor' name='editor[]' id='editor" + (editorAmount + 1) + "' rows='4' cols='30'></textarea>");

    $("#editor_container" + editorAmount).after(newElem);

    $("#editor" + (editorAmount + 1)).ckeditor();
}

这是HTML代码:

<form name="editors">
    <ul id="list"> …

我在春天遇到动态表单的问题.在我们的表单中,我们想要指定标题,并添加一些问题.我们有一个"添加"按钮,用于使用jquery添加问题输入表单.

我们的表格在要求时有一个问题栏.每次按下"添加"按钮时,都会添加额外的字段.提交时似乎没有提交额外的字段(第一个字段是由控制器接收的).为什么没有收到额外的字段？

我大致基于这个动态绑定列表示例的代码.

我的模型包括一个"报告"类,它有一个"标题"和一个"研究问题"列表.
下面是两个模型类的简短版本.Roo照顾所有的吸气者和制定者

@Entity
@RooJavaBean
@RooEntity
public class Report{
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private Long id;

    @NotEmpty
    private String title;

    @OneToMany(mappedBy="report")
    private List<Researchquestion> researchquestions;
}



@Entity
@RooJavaBean
@RooEntity
public class Researchquestion {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private Long id;    
    @NotEmpty
    private String question;
}

这里是表单的jspx

<div xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:form="http://www.springframework.org/tags/form"
    xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:spring="http://www.springframework.org/tags"
    version="2.0">
    <jsp:output omit-xml-declaration="yes"/>

    <spring:url value="/admin/report/appendquestion" var="insert_url"/>

    <script type="text/javascript">
    $(document).ready(function() {
        var questionPosition = 0;
        $("#addQuestionButton").click(function() {
            questionPosition++; …

我正在尝试制作一个三输入选择菜单，允许用户过滤到数据库中的一门课程进行选择。因此，用户首先选择位置，然后根据该选择给出该位置的所有课程选项。然后他可以按选择并被带到该课程。动态部分让我有点想歪了。如果可能的话，我希望得到任何帮助。我知道可能需要一些 AJAX，但我对此感到迷茫。请任何建议。

代码到此为止。看法。

<div class="row no-gutters wow slideInUp" data-wow-duration="1s">
  <div class="col-md-12 home-form">
    <form class="form-inline">
      <select class="custom-select mb-0 mr-sm-0 mb-sm-0">
        <option selected>Location</option>
        <%= @locations.each do |location| %>
                <option value="<%= location.id %>"><%= location.header %></option>
        <% end %>
      </select>
      <select class="custom-select mb-0 mr-sm-0 mb-sm-0">
        <option selected>Course Type</option>
        <%= @courses.each do |course| %>
                <option value="<%= course.id %>"><%= course.course_type %></option>
        <% end %>
      </select>

      <select class="custom-select mb-0 mr-sm-0 mb-sm-0">
        <option selected>Course</option>
        <%= @courses.each do |course| %>
                <option value="<%= course.id %>"><%= course.title %></option>
        <% end %> …

我在 Angular 5 中构建了一个动态表单组件（基于https://angular.io/guide/dynamic-form的文档和示例）。

一切正常，直到我尝试使用有角材料。

我在这里读过很多关于类似问题的文章，但它们似乎都是因为人们没有导入正确的模块或使用 mdInput 或 mat-Input 而不是 matInput。我遇到的问题并非如此。

任何想法或建议将不胜感激。

更改代码 - 因错误而中断 -

*mat-form-field 必须包含 MatFormFieldControl。***

动态表单控件组件模板

我对下面的工作代码所做的唯一更改是将输入字段包装起来并将 matInput 属性添加到输入字段。

我通过核心模块导入所有材质模块（MatFormFieldModule 和 MatInputModule 等）。我的所有材质输入和表单字段都在应用程序中的所有其他组件中工作，所以我不认为问题是我在导入中丢失了任何内容。

<div [formGroup]="form">

    <div [ngSwitch]="control.controlType">
        <mat-form-field>
            <input matInput placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="control.key" [id]="control.key"
                [type]="control.type">
        </mat-form-field>
        <select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
            <option value="">Select {{control.label}}</option>
            <option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</option>
        </select>
    </div>

    <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
</div>

当前代码-这工作完美，但我没有得到角度材料格式

选择器

<mi-dynamic-form [controls]="controls"></mi-dynamic-form>

动态表单组件

    import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } …

mat-stepper使用动态模板时，角材出现问题。例如，我有一个具有3个步骤的步进器，每个步骤都有自己的形式。但是，第一步使用隐藏表单来确定它是否有效，因为此步骤可以动态添加更多表单，因此将所有表单绑定到该步骤是不可能的。

第一步时，您可以创建多个表单，并且一切都会按预期进行，而不会对添加的新表单进行任何随机验证。如果您转到步骤2或3，然后回到第一步，然后创建一个新表单，它将自动以所有突出显示为红色的字段开始，就会出现问题。

我尝试了多种尝试来压制，但是我没有成功。下面是一个基本示例，说明我的第一步如何包含与步骤控件绑定的hiddenForm，默认表单以及在该步骤中创建更多表单的按钮。

我试图解决此问题的研究使我相信，无论是否新添加，材料步进器都会使所有垫形场变为红色（如果无效）。

<mat-horizontal-stepper [linear]="true">
    <mat-step [stepControl]="hiddenForm" label="step 1"
      <form [formGroup]="myForm">
        <mat-form-field>
          <mat-label>
            First Name
          </mat-label>

          <input [formControl]="firstName"matInput>

          <mat-error *ngIf="!firstName.valid && firstName.touched">
            First Name required
          </mat-error>
        </mat-form-field>
      </form>

    <button (click)="AddNewForm()">Add New Form</button>
  </mat-step>
</mat-horizontal-stepper>

尝试失败的尝试：（当前表单是新添加的表单）

this.currentForm.markAsUntouched();
this.currentForm.markAsPristine();
this.currentForm.setErrors(null);
this.currentForm.reset();

this.currentForm.get('firstName).setErrors(null);
this.currentForm.get('firstName).reset();
this.currentForm.get('firstName).markAsPristine();
this.currentForm.get('firstName).markAsUntouched();

<mat-step [completed]="true" ..> ( on all steps )

我正在使用Laravel 5.7& VueJs 2.5.*...

我知道如何动态添加输入字段，但对于我的应用程序，我不明白该怎么做。我有“TicketInvoice.Vue”，在那个页面我有一个引导模式来创建和更新我的发票。我有 2 个单独的 DB 表，一个 forTicketInvoice和另一个 for TicketInvoiceItems....TicketInvoiceItems是一个数组，因为 aTicketInvoice有很多TicketInvoiceItems.

我的<script>标签，这是所有TicketInvoice字段：

<script>
  export default {
    data() {
      return {

        ticketInvoices: {},
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_taxes_grand_total: "",
          ticket_invoice_grand_total: "",
          ticket_invoice_grand_total_words: "",
          ticket_invoice_terms: "",

        })
      };
    },
</script>

TicketInvoiceItems=Data我希望动态添加他们的字段。

<script>
export default {
  data() {
    return {

     form: new Form({ …

我有一个动态创建的表，它显示的数据如下：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" value=""></td>
  </tr>
</table>

我读到处理这个问题的适当方法是使用 FormsArray。但我也读到，使用 FormsArray 的正确方法是获取其控件数组：

<table>
  <tr *ngFor="let product of this.form.get('productCollection').controls; let i = index;"
     [formGroupName]="i">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" formControlName="name"></td>
  </tr>
</table>

问题是我无权访问此处的描述值。我还没有找到一种方法将其作为元数据传递给控件，​​以便我可以显示它。

那么问题是，对于这样的事情，哪种方法是正确的？是FormArray吗？它是一个 FormGroup 中的一组 FormControl 吗？或者每个表单控件都需要单独存在吗？我愿意接受有关如何开展这项工作的建议。

我需要在我的软件中通过Web界面允许用户设计的表单创建.即,他们创建一个问题,类型(文本,广播,复选框等),选项(如果需要)(无线电/支票),然后添加,并继续在此过程中,直到他们在表单中创建所有字段.

除了查看/填写/打印它们之外,不会对它们进行任何查询,即它们添加可以无限次填写的"问卷"(有些可能是20次,数百万次).

经过一些研究后,似乎EAV类型的解决方案听起来不错,除了那里有很多负面看法.很多人建议在这种情况下使用NoSQL数据库,但我并没有真正看到它们的优点 - 你仍然拥有一个包含许多字段的表单,然后是许多字段的结果.

某些字段(text/text_area/date)会有一个可能的值,但许多字段也有多个选项(单选按钮,选择下拉菜单,复选框).

这是传统SQL中的示例设计:

form:creator_id,name

form_field:form_id,order,question,type(text,text_area,date,radio,select,check)

form_field_option:form_field_id,名称,值,顺序(用于收音机/选择/检查)

form_result:form_id,application_id(不是我使用的名称,但所有结果都属于'应用程序')

form_field_value:form_result_id,form_field_id,form_field_option_id,value(如果选项字段的值为空,则text_field_option_id的文本字段为空)

基于此构建表单并获得结果似乎相当容易.它可能或可能不完全有效但是说一个典型的形式是5-30个问题,那会不会很糟糕？

把它放在NoSQL数据库中是否有任何优势,即Mongo或类似的东西？如果是这样,你能给我具体的例子,给我一个样本设计吗？我已经看到很多答案,比如'NoSQL更适合这个',但我没有这方面的经验,是因为更快的检索结果,还是什么？使用NoSQL会有什么缺点？

谢谢

我正在研究动态表单生成器.有人可以创建如下字段:字符串,文本,布尔值,数字,文件等.

是否存在用于存储来自此类动态表单的数据的宝石或指南？

我的意思是我可以为每种数据类型创建一些表,或者我可以将它们全部存储为TEXT带有应该转换的类型的标志.

UPD

或者我最好在这里使用nosql？

我的齐柏林飞艇笔记本中有一个下拉菜单元素

val instrument = z.select("Select Item", Seq(("A", "1"),("B", "2"),("C", "3")))

我想instrument在我的SQL中使用此变量的值。例如，我在笔记本中的下一段包含

%sql select * from table_name where item='<<instrument selected above>>'

这可能吗？如果是，语法会是什么样？