基本表格验证

Created: November-22, 2018

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 输入字段的样式，从而在用户将数据输入表单时更改演示文稿。