基本表格驗證

Angular 的優勢之一是客戶端表單驗證。

處理傳統的表單輸入並且必須使用疑問式 jQuery 樣式處理可能既耗時又挑剔。Angular 允許你相對容易地生成專業的互動式表單。

NG-模型指令提供雙向輸入欄位的結合和通常的 novalidate 屬性也被放置在窗體元件，以防止所述瀏覽器從做本地驗證上。

因此，一個簡單的形式看起來像：

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

對於 Angular 驗證輸入，使用與常規輸入元素完全相同的語法，除了新增 ng-model 屬性以指定要在作用域上繫結哪個變數。電子郵件顯示在前面的示例中。要驗證數字，語法將是：

<input type="number" name="postalcode" ng-model="zipcode" />

基本表單驗證的最後步驟是使用 ng-submit 連線到控制器上的表單提交功能，而不是允許發生預設表單提交。這不是強制性的，但通常使用它，因為輸入變數已在範圍內可用，因此可用於提交功能。為表單命名通常也是一種好習慣。這些更改將導致以下語法：

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

上面的程式碼是有用的，但 Angular 提供了其他功能。

下一步是要了解 Angular 使用 ng-pristine ， ng-dirty ， ng-valid 和 ng-invalid 來附加類屬性以進行表單處理。在 css 中使用這些類將允許你設定有效/無效和 pristine / dirty 輸入欄位的樣式，從而在使用者將資料輸入表單時更改簡報。