這兩天專案中涉及到了表單的內容，於是好好的把angular 4.0中表單的內容看了一下，總結了一些基礎的知識。總結的內容參考了以下**的內容，大佬們總結的很全，很詳細，若想對表單有進一步的加深和理解，請移步：
formcontrol：表單控制項，封裝了表單中的輸入，並提供了一些可供操縱的物件
validator：驗證器，對表單的輸入根據自己的需要新增一些限制
observer：觀察者，監聽表單的變化，並作出相應的回應
formcontrol：單一的輸入字段，封裝了字段的值和狀態，提供了一系列的公共api；獲取value時，會收到乙個「鍵值對」結構的物件。
formgroup：為一組formcontrol提供總包介面管理多個formcontrol，也提供了一系列公共的api。
formcontrol和formgroup都繼承自同乙個祖先abstractcontrol。
後續還會介紹formbuilder表單物件。
template driven forms：模板驅動式表單
reactive forms：響應式表單
required：設定表單控制項值是非空的
email：設定表單控制項值的格式時email
minlength：設定表單控制項值的最小長度
maxlength：設定表單控制項值的最大長度
pattern：設定表單控制項的值需匹配pattern對應的模式
通過物件的errors屬性來獲取對應驗證規則的驗證狀態。
valid：表單控制項有效
invalid
pristine：表單控制項值未改變
dirty：表單控制項值已改變
touched：表單控制項已被訪問過
untouched：表單控制項未被訪問
使用模板式表單，匯入formsmodule。
<
form
novalidate#f
="ngform"
>
<
label
>
<
span
>
your name
span
>
<
input
type
="text"
placeholder
="please input your name"
>
label
>
form
>
把ngform的值賦給#f變數，訪問該變數可以方便的獲取該表單的值。#f變數的值，是ngform指令的匯出物件。
（1）ngmodel：直接使用該指令，沒有使用繫結或關聯任何值，這時，ngmodel將自動關聯表單控制項的name屬性，並將該值作為ngform物件的屬性名；若input輸入框未設定name屬性，則會丟擲異常。
至此，我們已經繫結了name輸入框的值，下面為輸入框設定初始值。
（2）[ngmodel]：單向資料繫結
允許我們使用this.user.name來設定name輸入框的初始值，並且該值會自動繫結到f.value物件上。
但是由於是單向資料繫結，所以當表單name輸入框的值改變時，不會同步更新到this.user.name。
此時，我們通過雙向資料繫結來實現這一功能。
（3）[(ngmodel)]：雙向資料繫結
用來管理多個ngmodel，對表單輸入內容進行分組，具體例項如下：
<
divngmodelgroup
="account"
>
<
label
>
<
span
>
email address
span
>
<
input
type
="email"
placeholder
="your email address"
name
="email"
ngmodel
>
label
>
<
label
>
<
span
>
confirm address
span
>
<
input
type
="email"
placeholder
="confirm your email address"
name
="confirm"
ngmodel
>
label
>
div>
表單中提供了ngsubmit輸出屬性，用於監聽表單的提交。
<
form
novalidate
(ngsubmit
)="onsubmit(f)"#f
="ngform"
>
...form
>
當提交表單的時候，會把f作為引數，呼叫ngsubmit關聯的onsubmit()方法。
使用響應式表單，需要匯入reactiveformsmodule。
1.響應式表單中的指令：
formcontrol / formgroup / formcontrolname / formgroupname / formarrayname
在響應式表單中，我們移除了ngmodel和name=」」屬性。我們需要通過[formgroup]來繫結我們建立的mygroup物件。另外，我們還要使用formcontrolname指令，繫結我們建立的formcontrol控制項。
首先介紹一下formbuilder:
formbuild：可以理解為生產formcontrol和formgroup的工廠。乙個formbulider例項有兩個方法：
fb.control();//構造乙個formcontrol例項
fb.group();//構造乙個formgroup例項
ngoninit
() ); }
模板式表單使用方便，適用於簡單的場景；通過[(ngmodel)]實現資料的雙向資料繫結；不易於單元測試
響應式表單較為靈活，適用於複雜的場景，簡化了html模板的**，把驗證邏輯抽離到元件類中，方便跟蹤表單控制項值得變化；易於單元測試。
表單是我們實際生活中經常用到的乙個功能，在填寫表單的過程中，不乏有很多輸入框的限制及校驗，我們可以根據自己的需求自定義校驗器，這裡沒有詳細展開。
還有在驗證部分涉及到的方法也沒有詳細的說明，但是專案中有所涉及。如markasdirty()是將表單控制項值標記為已改變、markaspristine()是將表單控制項值標記為未改變，這個方法主要用在表單重置時、updatevalueandvalidity()是重新計算表單控制項的值和驗證狀態等。
以上。
Angular 4 0 內建指令
原文出處 在這篇文章中，我們將分別列舉每乙個內建指令的用法，並提供乙個例子作為演示。盡量用最少最簡單的描述，讓你在更快更準確地學會每一種內建指令的基本用法。作用 像 for 迴圈一樣，可以重複的從陣列中取值並顯示出來。例子 ts this.userinfo 張三 李四 王五 html 講解 他的語法...
angular4 0使用JSONP資料請求
ng4中有很多獲取資料的api，為了滿足跨域的需求，我選擇jsonp模組 應該有很多小夥伴遇到這個報錯吧 injected script did not invoke callback 下面我寫個完整的demo來解決這個問題。注入jsonp模組 import rxjs add operator ma...
angular4 0 路由守衛詳解
在企業應用中許可權 複雜頁多路由資料處理 進入與離開路由資料處理這些是非常常見的需求。其實angular路由守衛屬性可以幫我們做更多有意義的事，而且非常簡單。angular 的route路由引數中除了熟悉的path component外，還包括四種是否允許路由啟用與離開的屬性。這裡我們只講canac...