Angular动态表单生成（八）
生活随笔
收集整理的這篇文章主要介紹了
Angular动态表单生成（八）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
動態表單生成之拖拽生成表單（下）
我們的動態表單，最終要實現的效果與Form.io的在線生成表單的效果類似，可以參考它的demo地址：https://codepen.io/travist/full/xVyMjo
準備工作
首先，我們在過程中會需要用到一個彈出層控件，這里引用KendoUI的Dialogs，使用下面的命令安裝：
npm i --save @progress/kendo-angular-dialog安裝完成后，會提示幾個可選依賴沒有安裝，我們繼續使用命令完成安裝：
npm i --save @progress/kendo-angular-buttons jquery popper.js然后，我們將上一個列子中的動態表單的相關代碼Copy過來，用于我們本次動態表單的生成，首先是HTML中的代碼，我們將它放到拖拽釋放區域，代碼如下：
<div class="col-md-8"><h4>請將表單元素拖拽到這里</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中的相關代碼刪掉FormModel中的具體控件的定義后復制過來，代碼如下：
formModel: DynamicFormControlModel[] = [];formGroup: FormGroup; constructor(private formService: DynamicFormService) {}ngOnInit() {this.formGroup = this.formService.createFormGroup(this.formModel);}好，準備工作到此完成。
動態添加文本框到表單中
下面，我們來實現將文本框添加到表單中。大概流程是這樣的，當我們將文本框控件拖拽到表單中時，彈出一個窗口，讓用戶輸入文本框的Id、Label、Placeholder，然后點擊保存后，我們將文本框按用戶輸入的屬性動態的添加到表單中。
我們一步步來~
首先，定義一個彈出窗口，并定義了一些屬性和方法綁定到這個窗口中，其中：
textboxWindowIsOpen屬性來綁定窗口是否可見
closeTextboxWindow方法用于關閉窗口
saveTextBox方法用于用戶點擊保存按鈕后的動態添加控件到表單的相關事件處理
Id，Label，Placeholder文本框均與txtBox的相關屬性綁定，txtBox屬性的類型為DynamicInputModel，即ng-dynamic-forms中定義的文本框的類型。
<kendo-window title="請輸入表單元素屬性" *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()">關閉</button><button type="button" class="k-button k-primary" (click)="saveTextBox()">保存</button></div></form></kendo-window>然后讓我們來看看最終ts代碼中邏輯的實現吧：
首先是屬性的定義：
textboxWindowIsOpen = false;txtBox: DynamicInputModel = new DynamicInputModel({});其次當文本框控件拖拽到表單區域時，由上篇中提到的onDrop時間的觸發來打開上面定義的window：
onDropToForm(event) {switch (event.dragData.type) {case 'TextBox':this.openTextboxWindow();break;default:break;}}打開和關閉window的方法其實就是修改了如下textboxWindowIsOpen屬性的值：
openTextboxWindow() {this.textboxWindowIsOpen = true;}closeTextboxWindow() {this.textboxWindowIsOpen = false;}最后，當用戶點擊保存時，動態添加文本框到表單中：
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();}保存的這段代碼中，有兩個點需要注意：
1.不能直接將我們定義的txtBox屬性push到formModel中，因為txtBox是對象，為引用類型，而我們的txtBox是一個公用的對象，如果直接push該對象，則后續該對象發生變化，formModel中的該對象也會跟著變。
2.push完成后，必須再次使用formService創建表單，這里的原因我也沒有找到，不這樣做會報錯~
this.formGroup = this.formService.createFormGroup(this.formModel);Show Demo
讓我們來看看效果吧（這只是個Demo，有非常明顯的Bug還請大家見諒）
另外，對于其他的控件，其實原理都是一樣的，只是在彈出的窗口中的屬性不同而已，這里提供給大家思路，如果我把這些元素都實現了，我會放出來給大家~
代碼
拖拽相關的所有代碼打包如下：
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>請將表單元素拖拽到這里</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="請輸入表單元素屬性" *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()">關閉</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轉載于:https://www.cnblogs.com/baiyunchen/p/8497267.html
總結
以上是生活随笔為你收集整理的Angular动态表单生成（八）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： uva 1614奇怪的股市（归纳法证明，
- 下一篇： Manjaro下带供电的USB Hub提