iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

簡單的事 最困難-Angular動態Form元件 系列

有沒有一種可能
透過JSON格式的設定檔案
就可以產生跨多頁面的FormGroup呢
看似離譜的要求引發了一陣腦力激盪
將過去的專案經歷提煉成30天挑戰
究竟有沒有辦法完成呢

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文 團隊擁有夢想的鐵人猴子隊
DAY 21

第21天 地址元件

之前做了兩個複合元件今天要做一個很有機會用到的元件就是地址元件地址的話會需要選縣市選完縣市以後會在選行政區後面地址用文字輸入框特別的地方就是行政區的下拉選單內容...

2024-10-03 ‧ 由 nsfe0619 分享
DAY 22

第22天 mock-data

昨天我們增加了一個地址的檔案怪物如果這些放在元件裡面 會很恐怖的吧剛好之前其實就有想把main的設定檔抽取出來這樣我們來做個mock-data吧 首先即使我們要...

2024-10-04 ‧ 由 nsfe0619 分享
DAY 23

第23天 檢核管理

昨天調整mock-data有調整到檢核的部分不過檢核的部分寫在Form-input好像也會讓這邊太複雜而且為了方便日後管理與擴增我們今天會多拆一個validat...

2024-10-05 ‧ 由 nsfe0619 分享
DAY 24

第24天 特殊元件 列表

這幾天調整完基本架構再來繼續處理特殊規格元件的部分有時候我們會在表單裡面看到一種列表比如說新增聯絡人會有一個Table呈現多筆資料也許還會有新增修刪功能今天就要...

2024-10-06 ‧ 由 nsfe0619 分享
DAY 25

第25天 列表編輯模式

昨天我設計好了列表元件,但發現列表缺少新增、修改、刪除的功能。因此,我決定在原本的元件上做一些調整。不過這邊發現有個BUG昨天寫的程式輸入會有問題後來經過檢查以...

2024-10-07 ‧ 由 nsfe0619 分享
DAY 26

第26天 自製彈窗

昨天提到想做彈窗,不過我們沒有使用 PrimeNG,所以得自己實現彈窗元件。首先,我們需要建立一個 DialogService 來集中管理彈窗的狀態。這個服務將...

2024-10-08 ‧ 由 nsfe0619 分享
DAY 27

第27天 列表彈窗

昨天我們增加了彈窗規則今天要針對我們的需求做進一步調整現在比較麻煩的是我們想要傳一個模板進到彈窗裡面這個模板會是我們寫好的元件form-input這樣我們可以考...

2024-10-09 ‧ 由 nsfe0619 分享
DAY 28

第28天 設定設定檔

挑戰已經快到尾聲我們現在設定檔還是用手動的方式去設定這樣我們好像可以做一個設定的畫面既然要做畫面的話好像可以用我們設計的這個元件用自己的魔法對付自己那這邊我們先...

2024-10-10 ‧ 由 nsfe0619 分享
DAY 29

第29天 引用與拷貝

挑戰接近尾聲,好像也來不及多做甚麼,今天先針對程式面來分享一些心得,這次在設計這個元件,用到很多引用跟拷貝的概念,以前可能搞不懂甚麼是傳址傳值,也不懂為什麼要這...

2024-10-11 ‧ 由 nsfe0619 分享
DAY 30

第30天 結語

好不容易到最後一天了,我沒有想過我會寫完 30 天挑戰。雖然最近剛好工作比較忙,加上想寫的主題比預期複雜很多,也有幾天有小小的延遲,不過終究還是寫完了。 回顧我...

2024-10-12 ‧ 由 nsfe0619 分享