一直沒有使用angular的表單驗證以及表單提交數據。只是用的input綁定值，另外最近的設計都是點擊後顯示錯誤，而不是自動顯示錯誤。所以錯誤顯示一直也沒有做。而表單的非法驗證可以直接解決這個問題。angular 5最近更新的跟表單驗證有關。導致我想研究下angular的表單操作。把web移動端的表單驗證添加上。而我的隨筆基本都寫我不熟悉，我熟悉的，感覺舒適的都不會寫。

　　通過keyup事件，獲取用戶輸入。所有標準DOM事件對象都有一個target屬性，引用觸發該事件的元素。event.target.value返回該元素的當前內容。可以用event.key獲取按鍵本身。

　　傳入$event是靠不住的做法。典型化事件對象揭露了重要的一點，即反對把整個DOM事件傳到方法中，因為這樣組件會知道太多模板的信息。只有當它知道更多它本不應該了解的HTML實現細節時，它才能提取信息。這就違反了模板（用戶看到的）和組件（應用如何處理用戶數據）之間的分離關註原則。

　　從一個模板引用變量中獲得用戶輸入。在標識符前加上井號#就能聲明一個模板引用變量。這些變量提供了從模板中直接訪問元素的能力。除非綁定了一個事件，否則這將無法工作。只有在應用做了些異步事件（如擊鍵），angular才更新綁定（並最終影響到屏幕）。

@Component({
  selector: ‘app-loop-back‘,
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

　　上例代碼將keyup事件綁定到了數字0，這是可能是最短的模板語句。雖然這個語句不做聲明，但它滿足angular的要求，所以Angular將更新屏幕。從模板變量獲得輸入框比通過$event對象更加簡單。這個方法最漂亮得一點是：組件代碼從視圖中獲得了幹凈的數據值。再也不用了解$event變量及其結構了。

　　按鍵事件過濾（通過key.enter)。keyup事件處理器監聽每一次按鍵。有時我們只需要在意回車鍵。因為它標誌用戶結束輸入。解決這個問題得一種方法是檢查每個$event.keyCode,只有鍵值是回車鍵時才采取行動。更簡單的方法是：綁定angular的keyup.enter模擬事件。然後，只有當用戶敲回車鍵時，Angular才會調用事件處理器。可以應用在用戶登錄位置。

　　也可以使用失去焦點事件（blur）更新用戶輸入的值。

　　這些技術對於小規模演示很實用，但是在處理大量用戶輸入時，很容易變得累贅和笨拙。要在數據錄入字段和模型屬性之間傳遞數據，雙向數據綁定是更加優雅和簡潔的方式。

　　如果某個組件、指令或者管道是屬於imports中所導入的某個模塊的，那就不必要再把它聲明到本模塊的declarations數組中。在模板驅動表單中，只要導入了FormsModule就不用對<form>做任何改動來使用FormsModule.

　　Angular會在<form>標簽上自動創建並附加一個NgForm指令。NgForm指令為form增補了一些額外特性。它會控制那些帶有ngModel指令和name屬性的元素，監聽他們得屬性（包括其有效性）。它還有自己得valid屬性，這個屬性只有在屬性全部有效時才會是真。

　　在表單中使用ngModel可以獲得比僅使用雙向數據綁定更多的控制權。它還會告訴我們很多信息：用戶碰過此控件嗎？它得值變化了嗎？數據變得無效了嗎？ngModel指令不僅僅跟蹤狀態。它還使用特定的angular css類來更新控件，以反映當前狀態。可以利用這些CSS類來修改控件的外觀，顯示或隱藏消息。

待續。。。。

angular 表單操作