簡單的angular2表單驗證

由於項目要用到angular2，在完成功能的基礎上在html頁面嘗試使用響應式表單

 

angular的官方網站雖然有很詳細的東西，可是要運用到本身項目上仍是要好好理解一番的

本來代碼：

<input type="data" class="form-control" [(ngModel)]="title" placeholder="輸入活動標題" required>

目標是但願在用戶選中並輸入後倘若刪除到空則在下方出現Title is required

研究官方文檔後最後修改成：

<label for="title">標題：</label>
<input type="data" class="form-control" id="title" [(ngModel)]="title" #title1="ngModel" name="title" placeholder="輸入活動標題" required>
<div [hidden]="title1.valid || title1.pristine"
class="alert alert-danger">
Title is required
</div>

進行測試，成功！

 

總結：

input標籤中的id屬性主要負責與label標籤的for屬性綁定、name屬性負責對提交到服務器後的表單數據進行標識，只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。 

.valid標記表單元素有效，使得此值是有效時隱藏，避免網頁一打開就出現提示；.pristine表示表單元素是純淨的，用戶未操做過（未操做爲ture,操做後爲false），使得此值未被編輯時隱藏。

#title1="ngModel"是把title控件的屬性與hidden綁定起來，由於名字不能與ngModel綁定的數據相同，改成title1

這只是最簡單的表單驗證，之後還有不少要學的東西，記起來才能更好地理解基礎。