angular中两种表单的区别(响应式和模板驱动表单)


Posted in Javascript onDecember 06, 2018

angular的表单

angular的表单分为两种,一种是响应式的表单,另一种是模板驱动表单。使用'@angular/forms'库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)。

//ts
    profileForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      address: new FormGroup({
       street: new FormControl(""),
       city: new FormControl(""),
       state: new FormControl(""),
       zip: new FormControl("")
      })
     })
    //html
    <input type="text" formControlName="firstName">

模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。 它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。

//html
<form #heroForm="ngForm" appIdentityRevealed (ngSubmit)="onSubmit()">
  <div >
   <label for="name">Name</label>
   <input type="text" id="name" required [(ngModel)]="model.name" [ngModelOptions]="{updateOn: 'blur'}" name="name">

  <div >
   <label for="power">Hero Power</label>
   <select id="power" class="form-control" required [(ngModel)]="model.power" name="power">
    <option *ngFor="let power of powers" [value]="power">{{power}}</option>
   </select>
  </div>

  <button type="button" (click)="newHero();heroForm.reset()">
   New Hero
  </button>
  <button type="submit" [disabled]="!heroForm.form.valid">
   Submit
  </button>
 </form>
//ts
model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

响应式表单

响应式的表单中,添加校验逻辑是以返回一个ValidatorFn类的函数实现的

function forbiddenNameValidator(value: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const rule = new RegExp(value,'i');//设定验证规则,i是忽略大小写的意思
    const result = rule.test(control.value);//control.value是输入框的值,forbidden是正则结果
    return result ? { 'forbiddenName': { value: control.value } } : null;//如果匹配成功,则返回对象
  };
}

firstName:['',[forbiddenNameValidator('bob')]],

模板驱动表单

模板驱动的表单中,添加校验逻辑是以指令方式实现的

//ts
import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, ValidationErrors } from '@angular/forms';
import { FormGroup } from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 return (control: AbstractControl): { [key: string]: any } | null => {
  const forbidden = nameRe.test(control.value);
  return forbidden ? { 'forbiddenName': { value: control.value } } : null;
 };
}

@Directive({
 selector: '[appForbiddenName]',
 providers: [{ provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true }]
})
export class ForbiddenValidatorDirective implements Validator {
 @Input('appForbiddenName') forbiddenName: string;

 validate(control: AbstractControl): { [key: string]: any } | null {
  return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
   : null;
 }
}
//html
<input type="text" required [(ngModel)]="model.name" name="name" appForbiddenName="bob">

总结

响应式表单需要引入ReactiveFormsModule模块,在使用时需要引入大量的指令,使用麻烦,但是添加校验逻辑简单,用户可以动态添加新的输入域,适合非固定的表单。

模板驱动的表单中,表单的数据生成很简单,在html中需要双向绑定,并且配上name属性,添加校验时要是用指令的方式,适合固定的输入表单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
浅谈小程序globalData的那些事儿
Nov 01 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
微信小程序dom操作的替代思路实例分析
Dec 06 #Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 #Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 #Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 #Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 #Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 #Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
python unittest实现api自动化测试
2018/04/04 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python使用re模块验证危险字符
2020/05/21 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
大学生村官工作感言
2014/01/10 职场文书
服装创业计划书范文
2014/02/05 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB