Angular

Form 表单

在开始看angularjs如何处理表单前, 我们先想想处理表单时可能遇到的问题

  1. 如何数据绑定
  2. 验证表单element e.g. input select etc
  3. 显示出错信息
  4. 整个Form的验证
  5. 避免提交没有验证通过的表单
  6. 如果防止多次提交

form

如果我们引用了anuglajs, 在一个controller的scope下写了一个HTML的form,
其实我们已经在使用 angularjs 的 form directive 了。

下面两种html的写法都会调用 angularjs 的form directive, 并且可以用myForm引用这个
form, 来判断表单是否验证通过。

bind model 如何双向绑定

用 ng-model。 下面的代码把controler scope下的person的name和一个叫做 personName
input 绑定到了一起

valid field 验证表单element, 显示出错信息

这里分两部分, 第一部分是angular自带的验证器, 另一部分是自己实现的验证器。
这里只介绍第一种情况。 第二个会在单独的文章里描述。

angularjs 自带了一些html5的验证, 比如: 必填项、email、url (到1.0.7)其实只有这
三个 !!!^ ^

用法一如既往的简单, 都是声明式的. 下面我们定义了一个input,名字叫做 personEmail,
要求必须有输入,而且输入的必须是一个email. 通过变量

   myForm.personEmail.$valid

我们可以判定这个input的输入是否合法, 从而决定是否显示出错信息。

具体是那类错误可以通过

   myForm.personEmail.$error

用法如下:

有错 必填 email 地址不对

form是否通

form.$invalid

用这个值可以控制提交按键的状态, 值允许valid的form可以提交.

有错 必填 email 地址不对

提交的方法, 我们通过ng-submit 绑定到了controller里的save函数上。

form的简单使用就是这样了

注意

在至少1.0.7下, input form的名字要用驼峰, 否者有问题。

demo

demo

你可能感兴趣的:(Angular)