動(dòng)態(tài)表單生成之拖拽生成表單（下）

我們的動(dòng)態(tài)表單，最終要實(shí)現(xiàn)的效果與Form.io的在線生成表單的效果類似，可以參考它的demo地址：https://codepen.io/travist/full/xVyMjo

準(zhǔn)備工作

首先，我們?cè)谶^程中會(huì)需要用到一個(gè)彈出層控件，這里引用KendoUI的Dialogs，使用下面的命令安裝：

npm i --save @progress/kendo-angular-dialog

安裝完成后，會(huì)提示幾個(gè)可選依賴沒有安裝，我們繼續(xù)使用命令完成安裝：

npm i --save @progress/kendo-angular-buttons jquery popper.js

然后，我們將上一個(gè)列子中的動(dòng)態(tài)表單的相關(guān)代碼Copy過來，用于我們本次動(dòng)態(tài)表單的生成，首先是HTML中的代碼，我們將它放到拖拽釋放區(qū)域，代碼如下：

<div class="col-md-8"><h4>請(qǐng)將表單元素拖拽到這里</h4><div style="min-height: 300px;background-color: #EDEDEE" droppable (onDrop)="onDropToForm($event)"><form [formGroup]="formGroup" class="k-form"><dynamic-kendo-form [group]="formGroup"[model]="formModel"></dynamic-kendo-form></form></div></div>

然后，我們我們將Component中的相關(guān)代碼刪掉FormModel中的具體控件的定義后復(fù)制過來，代碼如下：

formModel: DynamicFormControlModel[] = [];formGroup: FormGroup; constructor(private formService: DynamicFormService) {}ngOnInit() {this.formGroup = this.formService.createFormGroup(this.formModel);}

好，準(zhǔn)備工作到此完成。

動(dòng)態(tài)添加文本框到表單中

下面，我們來實(shí)現(xiàn)將文本框添加到表單中。大概流程是這樣的，當(dāng)我們將文本框控件拖拽到表單中時(shí)，彈出一個(gè)窗口，讓用戶輸入文本框的Id、Label、Placeholder，然后點(diǎn)擊保存后，我們將文本框按用戶輸入的屬性動(dòng)態(tài)的添加到表單中。

我們一步步來~

首先，定義一個(gè)彈出窗口，并定義了一些屬性和方法綁定到這個(gè)窗口中，其中：

textboxWindowIsOpen屬性來綁定窗口是否可見

closeTextboxWindow方法用于關(guān)閉窗口

saveTextBox方法用于用戶點(diǎn)擊保存按鈕后的動(dòng)態(tài)添加控件到表單的相關(guān)事件處理

Id，Label，Placeholder文本框均與txtBox的相關(guān)屬性綁定，txtBox屬性的類型為DynamicInputModel，即ng-dynamic-forms中定義的文本框的類型。

<kendo-window title="請(qǐng)輸入表單元素屬性" *ngIf="textboxWindowIsOpen" (close)="closeTextboxWindow()"[minWidth]="250" [width]="450"><form class="k-form"><label class="k-form-field"><span>ID</span><input class="k-textbox" placeholder="Text Box Id" name="id" [(ngModel)]="txtBox.id"/></label><label class="k-form-field"><span>Label</span><input class="k-textbox" placeholder="Text Box Label" name="label" [(ngModel)]="txtBox.label"/></label><label class="k-form-field"><span>Placeholder</span><input class="k-textbox" placeholder="Text Box Placeholder" name="placeholder" [(ngModel)]="txtBox.placeholder"/></label><div class="text-right"><button type="button" class="k-button" (click)="closeTextboxWindow()">關(guān)閉</button><button type="button" class="k-button k-primary" (click)="saveTextBox()">保存</button></div></form></kendo-window>

然后讓我們來看看最終ts代碼中邏輯的實(shí)現(xiàn)吧：

首先是屬性的定義：

textboxWindowIsOpen = false;txtBox: DynamicInputModel = new DynamicInputModel({});

其次當(dāng)文本框控件拖拽到表單區(qū)域時(shí)，由上篇中提到的onDrop時(shí)間的觸發(fā)來打開上面定義的window：

onDropToForm(event) {switch (event.dragData.type) {case 'TextBox':this.openTextboxWindow();break;default:break;}}

打開和關(guān)閉window的方法其實(shí)就是修改了如下textboxWindowIsOpen屬性的值：

openTextboxWindow() {this.textboxWindowIsOpen = true;}closeTextboxWindow() {this.textboxWindowIsOpen = false;}

最后，當(dāng)用戶點(diǎn)擊保存時(shí)，動(dòng)態(tài)添加文本框到表單中：

saveTextBox() {const newTxtbox = new DynamicInputModel({id: this.txtBox.id,label: this.txtBox.label,placeholder: this.txtBox.placeholder});this.formModel.push(newTxtbox);this.formGroup = this.formService.createFormGroup(this.formModel);this.closeTextboxWindow();}

保存的這段代碼中，有兩個(gè)點(diǎn)需要注意：

1.不能直接將我們定義的txtBox屬性push到formModel中，因?yàn)閠xtBox是對(duì)象，為引用類型，而我們的txtBox是一個(gè)公用的對(duì)象，如果直接push該對(duì)象，則后續(xù)該對(duì)象發(fā)生變化，formModel中的該對(duì)象也會(huì)跟著變。

2.push完成后，必須再次使用formService創(chuàng)建表單，這里的原因我也沒有找到，不這樣做會(huì)報(bào)錯(cuò)~

this.formGroup = this.formService.createFormGroup(this.formModel);

Show Demo

讓我們來看看效果吧（這只是個(gè)Demo，有非常明顯的Bug還請(qǐng)大家見諒）

另外，對(duì)于其他的控件，其實(shí)原理都是一樣的，只是在彈出的窗口中的屬性不同而已，這里提供給大家思路，如果我把這些元素都實(shí)現(xiàn)了，我會(huì)放出來給大家~

代碼

拖拽相關(guān)的所有代碼打包如下：

1 <div style="padding:20px;"> 2 <div class="row" style="margin-top:20px;border: 1px solid;padding:10px;"> 3 <div class="col-md-4"> 4 <ul class="list-group"> 5 <li class="list-group-item" draggable [dragData]="{type:'TextBox'}">TextBox</li> 6 <li class="list-group-item" draggable [dragData]="{type:'Select'}">Select</li> 7 <li class="list-group-item" draggable [dragData]="{type:'TextArea'}">TextArea</li> 8 <li class="list-group-item" draggable [dragData]="{type:'Password'}">Password</li> 9 <li class="list-group-item" draggable [dragData]="{type:'Number'}">Number</li> 10 </ul> 11 </div> 12 <div class="col-md-8"> 13 <h4>請(qǐng)將表單元素拖拽到這里</h4> 14 15 <div style="min-height: 300px;background-color: #EDEDEE" droppable (onDrop)="onDropToForm($event)"> 16 <form [formGroup]="formGroup" class="k-form"> 17 <dynamic-kendo-form [group]="formGroup" 18 [model]="formModel" 19 > 20 21 </dynamic-kendo-form> 22 </form> 23 </div> 24 </div> 25 </div> 26 </div> 27 28 <kendo-window title="請(qǐng)輸入表單元素屬性" *ngIf="textboxWindowIsOpen" (close)="closeTextboxWindow()" 29 [minWidth]="250" [width]="450"> 30 31 <form class="k-form"> 32 33 <label class="k-form-field"> 34 <span>ID</span> 35 <input class="k-textbox" placeholder="Text Box Id" name="id" [(ngModel)]="txtBox.id"/> 36 </label> 37 <label class="k-form-field"> 38 <span>Label</span> 39 <input class="k-textbox" placeholder="Text Box Label" name="label" [(ngModel)]="txtBox.label"/> 40 </label> 41 <label class="k-form-field"> 42 <span>Placeholder</span> 43 <input class="k-textbox" placeholder="Text Box Placeholder" name="placeholder" [(ngModel)]="txtBox.placeholder"/> 44 </label> 45 46 <div class="text-right"> 47 <button type="button" class="k-button" (click)="closeTextboxWindow()">關(guān)閉</button> 48 <button type="button" class="k-button k-primary" (click)="saveTextBox()">保存</button> 49 </div> 50 </form> 51 52 </kendo-window> 53 kendo-ui-drag-drop.component.html

1 import {Component, OnInit} from '@angular/core'; 2 import {DynamicFormControlModel, DynamicFormService, DynamicInputModel} from "@ng-dynamic-forms/core"; 3 import {FormGroup} from "@angular/forms"; 4 5 @Component({ 6 selector: 'app-kendo-ui-drag-drop', 7 templateUrl: './kendo-ui-drag-drop.component.html', 8 styleUrls: ['./kendo-ui-drag-drop.component.css'] 9 }) 10 export class KendoUiDragDropComponent implements OnInit { 11 12 textboxWindowIsOpen = false; 13 txtBox: DynamicInputModel = new DynamicInputModel({}); 14 formModel: DynamicFormControlModel[] = []; 15 formGroup: FormGroup; 16 17 constructor(private formService: DynamicFormService) { 18 } 19 20 21 ngOnInit() { 22 this.formGroup = this.formService.createFormGroup(this.formModel); 23 } 24 25 onDropToForm(event) { 26 switch (event.dragData.type) { 27 case 'TextBox': 28 this.openTextboxWindow(); 29 break; 30 default: 31 break; 32 } 33 } 34 35 openTextboxWindow() { 36 this.textboxWindowIsOpen = true; 37 } 38 39 closeTextboxWindow() { 40 this.textboxWindowIsOpen = false; 41 } 42 43 saveTextBox() { 44 const newTxtbox = new DynamicInputModel({ 45 id: this.txtBox.id, 46 label: this.txtBox.label, 47 placeholder: this.txtBox.placeholder 48 }); 49 50 this.formModel.push(newTxtbox); 51 this.formGroup = this.formService.createFormGroup(this.formModel); 52 this.closeTextboxWindow(); 53 } 54 } 55 kendo-ui-drag-drop.component.ts

轉(zhuǎn)載于:https://www.cnblogs.com/baiyunchen/p/8497267.html

總結(jié)

以上是生活随笔為你收集整理的Angular动态表单生成（八）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。