Jeff Wu's Note

Archives · 2016

Home

About

Archives

Angular 2Angular 16FormsModel-Driven

Angular Forms 介紹:Model-Driven Forms

面對各種神奇需求的表單,要能克服重重挑戰,就用 Model-Driven 實作吧!上一篇我們已經介紹了如何使用 Template-Driven 進行表單的開發,對於大部分簡易的表單,搭配預設提供的 Validator Directive,就能輕鬆的實作出可驗證、有提示互動的表單。但人生總不會是都那麼的簡單,在實戰開發上,我們往往會遇到各種神奇的表單需求,可能是多個欄位之間會有複雜的驗證,抑或是動態的驗證,甚至連表單的欄位是動態的! 對於這些奇葩的需求,相信有遇過的朋友都知道,光靠是 Template-Driven 是不夠的,雖然 Template-Driven 也可以實作出複雜的表單,但會造成 Template 會非常的髒亂,而且開發過程中會在 Template 與 Component 之間來回進行,這樣的..

Read more
loading..
FormsTemplate-Driven-Forms

Angular 2 Forms 介紹:Template-Driven Forms

介紹如何使用 template driven 快速建立簡易的互動表單Angular 2 正式版在日前已經正式發佈了,因此較不會再遇到 alpha 或 beta 甚至 rc 的時候還出現的重大變更(BREAK CHANGE)了,真的出現的話,我想也應該是 Angular 3 要出來的時候了 XD。 先前參考官方文件介紹過 Angular 2 Forms 的用法,這次來自己實作,以 Template-Driven 的方式建立簡單的登入表單,並且介紹完整的運作流程,主要的內容如下: Import FormsModule & 準備 HTML template 在 Template 中的表單控制項加上 ngModel Directive 初始化表單控制項預設值 使用 ngModel 提供的狀態進行 CSS ..

Read more
Angular 2ngModel

Angular 2 ngModel 的內幕(?)

關於 NgModel這篇文章主要來深入討論 [(ngModel)],若你已經有在開發 Angular 2 的專案,或是自己嘗試練習 Angular 的過程中, [(ngModel)] 一定會接觸到的語法,透過[(ngModel)] 實現雙向繫結的功能,但,為什麼要使用中括號和小括號呢? 其實,繫結語法中的  [( )]  符號是一個很好的提示。

Read more
loading..
Angular 2Forms

Angular 2 Forms 介紹

前言Angular 2 目前已經來到 RC 4 了,相信再過不久就會即將正式的 Release,這次就先針對官網上表單(Forms)文件的部分來做研究與紀錄。之後再寫其他關於 Angular 2 的介紹。現今的 Web 應用 ,不論是登入頁面、會員申請、購物車等各式各樣的應用一定都會使用到表單,透過表單來建立一個有凝聚力且有效、引人注目的資料輸入體驗。Angular 表單整合了使用者資料繫結控制,追蹤變更、驗證輸入的正確性並提供錯誤訊息顯示。 我們將會從頭開始建立一個範例表單,分成幾個項目並按照逐一實作。實作的項目有: 使用 Component 與 Template 建立一個 Angular 表單 使用 [(ngModel)] 語法實現雙向資料繫結,提供讀取與寫入控制項的值 結合一個表單來使用  ngMo..

Read more
loading..
template issue

Hexo 預設 template 頁面切換按鈕問題

最近開始在使用 Hexo 來寫部落格文章,這是一個 blog framework,使用起來很方便。只要透過 Markdown 語法就可以做出常用的基本排版了,之後再寫篇介紹的文章囉! 今天遇到了一個問題,Hexo 的預設佈景主題 landscape 文章列表的頁面切換按鈕顯示異常。看到覺得奇怪,難道這是什麼神奇的格式嗎? 經過抽絲剝繭的調查,原來是預設的佈景主題在頁面切換的按鈕語法似乎寫錯了。下面是 template 中 archive.ejs 的檔案其中一部分的內容,主要就是 page-nav 的部分有誤。 <% if (page.total > 1){ %> <nav id="page-nav"> <%- paginator..

Read more
12