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 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
jQuery 创建Dom元素
May 07 Javascript
初识javascript 文档碎片
Jul 13 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
Boostrap入门准备之border box
May 09 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
微信小程序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
URL Rewrite的设置方法
2007/01/02 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
node.js实现快速截图
2016/08/27 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
js代码实现轮播图
2020/05/04 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python中的默认参数详解
2015/06/24 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python自定义线程类简单示例
2018/03/23 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python 自定义对象的打印方法
2019/01/12 Python
python config文件的读写操作示例
2019/09/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
经营理念标语
2014/06/21 职场文书
四年级小学生评语
2014/12/26 职场文书
订货会邀请函
2015/01/31 职场文书