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

Angular 2 + 折腾记 ：(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对象-- form #testform=ngForm (ngSubmit)=Submit(testform.value,testform.valid) label for=usernameName/label input type=text id=username #UserName=username class=form-control required minlength=4 maxlength=24 name=username [(ngModel)]=username [ngModelChange]=validate($event) div *ngIf=UserName.valid || (UserName.pristine !testform.submitted) 您输入的值有误，请重新输入 /div button type=submit 提交/button /form 有两种方式处理来对上面的表单做校验； 在Submit()函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 数据驱动(Reactive Form) 响应式表表单：原理是一开始就构建整个表单，表单的值通过特殊指令formControlName一一关联(类似ngModel); 相关名词： - FormGroup: 用来追踪表单控件有效状态及值 =》 可以理解为获取且可以操作整个表单的数据 - FormBuilder:表单数据构建工具[构建初始表单]，简化构建代码(包括了new FormGroup(),new FormControl(),new FormArray()),FormGroup()内置多种校验方式 - formControlName: 同步与FormGroup构建表单内相同字段的值！ 项目中的案例 html div [@flyIn]=true div class=beautify-form *ngIf=!showLoading div class=header 欢迎登录 /div form [formGroup]=form (ngSubmit)=onSubmit(form) div class=form-group [ngClass]={ has-danger: form.controls.UserName.invalid form.controls.UserName.value ,has-success: form.controls.UserName.valid form.controls.UserName.value } div class=input-group input-group-lg span class=input-group-addon fpd fpd-ordinarylogin1/span input type=text class=form-control formControlName=UserName placeholder=手机号码 \ 邮箱 /div div class=form-control-feedback *ngIf=(form.controls.UserName.dirty || form.control