Angular 動態表單 根據選擇聯動顯示

記錄一下剛剛完成的乙個功能

需求是根據固定的層級結構做動態聯動,在網上找了很多動態表單的相關教程,大部分都是在最開始載入就生成表單.而我的需求是需要在選擇了父級之後再展示父級下的選項

參考了大佬的修仙之路 和 動態生成表單 感謝~

配置好已知的層級結構

const itemconfig = [,,,

}]},]
},]
},];

在初始表單選項上繫結change事件

itemform: formgroup;

// 根據父級的選擇 展示的item列表
itempushdom = ; 
ngoninit(): void 
createfrom(): any );
return group;
}

實現動態插入

通過之前的操作 現在我們的頁面上已經能看到初始的選項了

接下來就是實現動態插入 , 其實簡單來說就是分為兩個步驟: dom插入可選項 和 formgroup新增項

再加上change父級之後清除之前的選擇

dom插入可選項

需要配合之前初始選項繫結的change事件 傳遞children的資訊

html 上也需要配置好相關的可能出現的型別 通過ngswtech 展示 (本例型別較少,只有select和input 如果型別較多可以參考官方文件的動態表單 通過component控制出現的型別)

formgroup新增項

通過 addcontrol()/removecontrol() 對formgroup 表單項 進行新增和刪除(也可以新增驗證)

下面直接上**

component.html (放在上一段form裡)

}:

(selectionchange)="changeselect($event.value,newitem.name)" required>}

changeselect(item: any, itemname: string): void 

createitemdom(item: any, itemname: string): void );
});this.addfromdom(item.key, itemname, item.item_type, '', options, item.type);
} else if (item.type === 'item') );
});this.addfromdom(item.key, itemname, item.item_type, item.value, options, item.type);
} else 
}}  
// add/remove itempushdom
// 儲存item的name/type/parent 在二維陣列中儲存子父級關聯
addfromdom(name: string, key: string, type: string, value: string, options: any, item_type: string): void );
}  checkitemdom(itemname: string): any 
}}  addfromcontrol(name: string): void 
delfromcontrol(name: string): void

最後只需要 通過 this.itemform.value 就可以獲得所選的值

或者儲存itempushdom

Angular動態表單生成（四）

我們接著上篇，先把小目標中的所有欄位都定義出來 這部分就是苦力活兒了，把kendouicomponent中的formmodel完善即可 1 formmodel dynamicformcontrolmodel 2new dynamicinputmodel 7new dynamicradiogroupm...

Angular表單驗證

對前端開發人員來說，表單是非常重要的，它負責使用者與程式的互動。它承載著一部分資料校驗的功能，以此減少服務端的壓力。本文就angular表單驗證的兩種方式進行闡述，如有問題，歡迎指正。文章目錄 模板驅動驗證 響應式表單的驗證 自定義驗證器 為了向模板驅動表單中新增驗證，需要新增一些驗證屬性，這裡就使...

Angular 表單簡介

angular 中有兩種表單 元件類指令 formsmodule 元件類指令 reactiveformsmodule validity visited html form template driven formreactive form接下來我們主要來介紹一下 reactive form 的一些相...