Angular 27 初步了解表单模板驱动及数据驱动及脱坑要点.docx

《Angular 27 初步了解表单模板驱动及数据驱动及脱坑要点.docx》由会员分享，可在线阅读，更多相关《Angular 27 初步了解表单模板驱动及数据驱动及脱坑要点.docx（15页珍藏版）》请在冰豆网上搜索。

Angular 27 初步了解表单模板驱动及数据驱动及脱坑要点.docx

Angular27初步了解表单模板驱动及数据驱动及脱坑要点

Angular2+折腾记：

（7）初步了解表单：

模板驱动及数据驱动及脱坑要点

前言

表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。

首先需要操作表单的模块引入这两个模块；

import{FormsModule,ReactiveFormsModule}from'@angular/forms';

模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule

一般做表单校验及操作推荐用数据驱动的方式，好维护和理解。

。

模板驱动

模板驱动：

主要是依赖[（ngModel）]和#scope_var以及原生表单控件属性（require,minlenght,maxlength等）来操作表单的那的值亦或者校验

一个最简单的例子

--#UserName是局部变量，若是有ngmodel,拿到的就是一个响应对象，若是非ngmodel绑定的，则是dom元素代码-->

--testform这个局部变量保存了表单的所有相关信息-->

--ngSubmit是用来触发表单提交的-->

--ngModel相应变量的值-->

--$event是原生dom对象-->

Name

requiredminlength="4"maxlength="24"

name="username"[（ngModel）]="username"[ngModelChange]="validate（$event）">

testform.submitted）">

您输入的值有误，请重新输入

提交

有两种方式处理来对上面的表单做校验；

在Submit（）函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样

每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验

数据驱动（ReactiveForm）

响应式表表单：

原理是一开始就构建整个表单，表单的值通过特殊指令formControlName一一关联（类似ngModel）;