iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Angular 深入淺出三十天:表單與測試 系列

Angular 身為前端三大框架之一,除了有統一的規範、完整的生態圈之外,個人覺得它在製作表單的方式上也有其獨到之處,再加上 Angular 生態圈自帶的測試框架,讓你學成之後再也不會寫出有 bug 的表單!就讓李歐用三十天的時間來分享如何用 Angular 來製作表單,並且學習如果使用 Angular 來寫測試,讓你的程式碼品質更上一層樓!

鐵人鍊成 | 共 30 篇文章 | 55 人訂閱 訂閱系列文 RSS系列文 團隊請支援 Coding
DAY 21

Angular 深入淺出三十天:表單與測試 Day21 - E2E 測試實作 - 被保人表單

大家如果對於昨天的 E2E 測試如果沒有什麼問題的話,今天就來為我們的被保人表單撰寫 E2E 測試吧! 實作開始 撰寫測試前的準備昨天有說過了,今天就不再贅...

2021-10-06 ‧ 由 Leo 分享
DAY 22

Angular 深入淺出三十天:表單與測試 Day22 - 把 Cypress 變成 TypeScript 版

平常都用慣 TypeScript 版的 Cypress,但這兩天都用 JavaScript 在寫測試,令我有點不太習慣。 雖然 JS 版或 TS 版的差別並沒...

2021-10-07 ‧ 由 Leo 分享
DAY 23

Angular 深入淺出三十天:表單與測試 Day23 - Reactive Forms 進階技巧 - 欄位連動檢核邏輯

大家在日常生活中,應該看過滿多表單的某個欄位會隨著另個欄位的改變,而造成該欄位的驗證邏輯需要改變的情況吧? 舉例來說,可能會有個欄位叫做聯絡資訊,使用者可以選...

2021-10-08 ‧ 由 Leo 分享
DAY 24

Angular 深入淺出三十天:表單與測試 Day24 - Reactive Forms 進階技巧 - Auto-Complete Searching

在日常生活中,大家應該滿常看到有些系統的搜尋輸入框是可以在一邊打字的同時,一邊將搜尋結果呈現在一個下拉選單裡,非常地貼心且方便。 當然,這其中其實有很多細節,...

2021-10-09 ‧ 由 Leo 分享
DAY 25

Angular 深入淺出三十天:表單與測試 Day25 - 測試進階技巧 - DI 抽換

好一陣子沒寫單元測試與整合測試了,大家是否覺得有些生疏了呢? 之前的測試都寫得很簡單,正好昨天好好地寫了搜尋輸入框還有呼叫 API ,可以藉由撰寫這個功能的測...

2021-10-10 ‧ 由 Leo 分享
DAY 26

Angular 深入淺出三十天:表單與測試 Day26 - 進階表單開發技巧 - 自訂驗證器

之前在開發表單的時候,我們都是使用 Angular 所提供的驗證器來驗證表單欄位裡的值是否符合我們的需求。 雖然 Angular 已經這麼貼心地提供了這麼多驗...

2021-10-11 ‧ 由 Leo 分享
DAY 27

Angular 深入淺出三十天:表單與測試 Day27 - Reactive Forms 進階技巧 - 跨欄位驗證

今天想要跟大家分享的是跨欄位驗證的小技巧,這個小技巧其實沒有多厲害或多特別,只是可能滿多人剛好不知道原來可以這樣用。 而我們在 Day 23 - Reacti...

2021-10-12 ‧ 由 Leo 分享
DAY 28

Angular 深入淺出三十天:表單與測試 Day28 - 自訂表單元件

經過了這段時間的練習與學習,相信大家應該越來越能體會 Angular 表單的強大與便利。 不過既然 Angular 表單這麼好用,如果能讓自己做的 Compo...

2021-10-13 ‧ 由 Leo 分享
DAY 29

Angular 深入淺出三十天:表單與測試 Day29 - ControlContainer

昨天跟大家分享了自訂表單元件的作法,但昨天的作法只適用於一個欄位、一個 FormControl 。 雖然 FormControl 裡是可以設 {} 的值,但如...

2021-10-14 ‧ 由 Leo 分享
DAY 30

Angular 深入淺出三十天:表單與測試 Day30 - 表單原理

經過前面二十九天的的練習與學習,相信大家應該在表單的實作上都熟悉了不少,只要不是太複雜、太特別的表單應該也都難不倒你們。 今天是本系列文的最後一天,就讓我們來...

2021-10-15 ‧ 由 Leo 分享