使用 Angular 13 建立 Reactive Form 表單驗證範例

github Source code 本文將記錄如何一步步從無到有使用 Angular 13 Reactive Form 表單驗證 與 Bootstrap 建立 一個使用者資料註冊的表單 功能,在這個表單中當按下送出時會自動檢核使用者所輸入的資料是否合乎程式中所設定的檢核邏輯,並顯示合適的訊息反應給使用者。其中將會使用到下列技術: Angular CLI Bootstrap 4 & 5 (UI Framework) Angular Reactive Form Custome Validator 建立新專案 $ ng version Angular CLI: 13.3.6 Node: 16.14.0 Package Manager: npm 8.3.1 OS: linux x64 Angular: 13.3.9 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Package Version --------------------------------------------------------- @angular-devkit/architect 0.1303.6 @angular-devkit/build-angular 13.3.6 @angular-devkit/core 13.3.6 @angular-devkit/schematics 13.3.6 @angular/cli 13....

May 28, 2022 · 8 min · Theme PaperMod

使用 nvs 來管理不同版本 Node.js 執行環境

Angular 的版本更新迭代的相當快 (所有的前端開於工具都有相同的情形),安裝及使用 Angular Cli 時必須在有 Node.js 的環境下才能進行。 當你在同一台電腦中使用不同版本的 Angular 時就容易在安裝相關套件時遇到警語,原因常是因為 Angular 與 Node.js 版本搭配的關係。 至於為何有同時使用不同版本的 Angular 呢? 除了開發的專案沒有全部都一起升級至統一版本(這是一件複雜的事)的因素外,個人最常遇到的狀況是: 當在網上(github)找到很棒的 Demo / Sample 程式,在 git clone 回電腦後發現它的版本是舊版本 Angular 所撰寫,使用 npm install 安裝相關套件時,出現警告訊息,甚至無法安裝成功。 為了要管理同一台電腦中存在著有不同版 Node.js,讓你很容易在各版本中自由的進行切換 (甚至在進入不同目錄時自動切換對應的 Node.js 版本),你需要 Node.js 版本管理工具,如: NVM 或 NVS,在這個筆記中要記錄的是 NVS。 安裝 nvs F:\> choco list nvs #先查看是否已安裝了 nvs F:\> choco install nvs #安裝 nvs F:\> nvs --version #查看是否安裝成功,並顯示 nvs 版本 註:安裝完成後若遇到在 cmd 中可正常執行,但在Windows PowerShell 無法使用時,可使用‘系統管理員’身份開啟 Posershell,並執行 PS>Set-ExecutionPolicy RemoteSigned 應可解決這個問題。...

December 12, 2021 · 3 min · Theme PaperMod

Angular cli 與 Node.js 版本對照

December 8, 2021 · 0 min · Theme PaperMod