iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

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

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

第11天 要改的東西太多了 不如就繼承吧

昨天調整了base-text今天來調整其他的調整著調整著覺得重複的程式碼太多了吧有沒有辦法將重複的部分共用呢這邊我們考慮使用extends用一個基本的模板把大多...

2024-09-23 ‧ 由 nsfe0619 分享
DAY 12

第12天 表單檢核Validator(上)

寫angular的一定對FormControl不陌生相對的Validator對於FormControl更是像影子一樣的存在所以今天我們要來試著在我們的設定檔裡面...

2024-09-24 ‧ 由 nsfe0619 分享
DAY 13

第13天 validator檢核元件(下)

昨天改好base的共用元件現在最裡面是control這樣base元件上面可以新增檢核的部分那先在base-element裡面寫一個getError()去取出co...

2024-09-25 ‧ 由 nsfe0619 分享
DAY 14

第14天 分頁規則

昨天加上了檢核的部分要讓檢核能更方便的應用那應該得做一下分頁的部分畢竟我們想要用設定檔產生畫面一些頁面上的基本設定也可以在分頁設定檔上使用 首先我們做個簡單的重...

2024-09-26 ‧ 由 nsfe0619 分享
DAY 15

第15天 關於分頁後檢核的部分

昨天我們處理完分頁現在來把檢核的部分套上去我們昨天有處理form表單的部分檢核的部分其實昨天有寫一點不過沒有特別解釋到 // form-input.compon...

2024-09-27 ‧ 由 nsfe0619 分享
DAY 16

第16天 版面調整

調整到現在30天已經過一半了話說我們的畫面好像有點醜現在比較常用到的就是12等分這種分割畫面的方法為了這個我們裝一下Bootstrap npm install...

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

第17天 組合元件-電話(上)

現在我們透過設定檔產生表單看起來很方便沒錯不過如果有一些特殊情況比如說市內電話 區碼 電話號碼 分機三個欄位 如果用我們現在的設定方式會變成三個欄位各有一塊區域...

2024-09-29 ‧ 由 nsfe0619 分享
DAY 18

第18天 組合元件-電話(中)

昨天我們嘗試寫電話的組合元件卻發現我們的程式又需要重構了昨天新增了innerForm的部分現在要來調整input-form的顯示條件原本是採用fieldSett...

2024-09-30 ‧ 由 nsfe0619 分享
DAY 19

第19天 組合元件-電話(下)

昨天畫面雖然橋正常了不過似乎還有些問題我們來檢查一下換頁的時候有點狀況切換頁面的時候畫面有點異常檢查一下form-input的程式 ngOnChanges():...

2024-10-01 ‧ 由 nsfe0619 分享
DAY 20

第20天 重構組合元件 及 組合元件radio+text

今天我們要來寫另一個組合元件我們有個需求是需要一組radiobutton的是或否如果勾是 則後面的文字欄才可以輸入 不然則disabled 在調整元件之前 我們...

2024-10-02 ‧ 由 nsfe0619 分享