angular2 表单验证

时间:2023-03-09 02:17:54
angular2 表单验证
  1. 模版式表单

(1) angular遇到form自动接管,不想自动接管,添加ngNoForm,当标签为div时,但想被表单接管,添加ngForm;

(2) ngForm可以被模版本地变量引用,以便在模版中使用表单的实例。

angular2 表单验证

如:#myForm就是申明本地变量,myForm值为表单实例的对象。当表单被angular接管时,action 和 method 将不会起作用。

angular2 表单验证

angular2 表单验证

结果:

angular2 表单验证

注意:在被angular接管的表单里的任何输入框需要定义name属性。

  2.响应式表单:

(1)

angular2 表单验证

(2)用法:首先创建数据模型;

angular2 表单验证

导入表单模块:

angular2 表单验证

Html页面指令:

angular2 表单验证

结果:

angular2 表单验证

 (3) 工具formBuilder对响应式表单的优化:

angular2 表单验证

(4)校验器:Validators

angular2 表单验证

打印:this.formModelT

angular2 表单验证

(5) 自定义校验器:校验两次密码是否相同

angular2 表单验证