iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

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

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

第1天:為什麼是這個題目 前言

大家好,我是小猴,在 Angular 領域也打滾幾年了,從之前懵懵懂懂的菜雞到現在可以稍微唬爛的程度。不是很喜歡從頭到尾讀文件的我,大部分都是碰到問題才找答案。...

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

第2天 基本架構

這次挑戰寫的可能有點複雜所以沒有要在基本的部分上著墨太多,基礎的部分我想推薦大家看LEO大大的「Angular 深入淺出三十天」真的寫得很好,絕對不是因為我們有...

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

第3天:基本欄位與初步元件架構

這個功能需要整合幾個常用的欄位,在這邊我們就先把比較好整理的input欄位都先列出來,順便思考一下架構的雛形,這邊我們列出一些常用的input欄位: text...

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

第4天:調整模版

昨天做了基本的元件,不過畫面上呈現的應該不只有輸入框的部分,基本可能會有欄位標題,必填提示相關的內容,於是這篇會開始思考,設定檔以及畫面呈現的部分, 初步預計應...

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

第5天 初步決定設定檔內容

現在我們有基本的模板的雛型了,這樣可以思考一下設定檔大概是甚麼樣子,原本預計應該是後端api會給一個json陣列,畫面上要幾個欄位 陣列裡面就有幾組設定,目前控...

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

第6天 資料綁定

由於畫面上的欄位是透過json產生的到時候表單送出的欄位應該也是動態產生的所以這邊也預計透過剛剛的設定檔產生一個紀錄畫面數值的obj // main.compo...

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

第7天 下拉選單元件

前天確認了設定檔的格式,是時候來補上一些其他的基本格式了,之前我們只有加入輸入框的部分,現在來加入一些比較特殊但也相當常用的元件 首先就是相當常使用到的下拉選單...

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

第8天 單選元件radio

昨天我們完成了下拉選單元件,今天我們來做單選的radio元件,一樣在element下面增加base-radio ng g component base-radi...

2024-09-20 ‧ 由 nsfe0619 分享
DAY 9

第9天 多選checkbox元件

今天我們要做多選元件checkbox就先參考昨天radio的寫法 一樣在element下面增加base-checkbox ng g component base...

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

第10天 改寫元件for FormControl

元件類型都差不多以後要進入另一個重點我們用設定檔產生表單還會需要幾個功能 分頁 檢核 檢核未通過時阻止分頁 在這個情況下我們需要能處理檢核的元件這樣似乎需要...

2024-09-22 ‧ 由 nsfe0619 分享