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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
设定php简写功能的方法
2019/11/28 PHP
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
浅析Jquery操作select
2016/12/13 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
档案室主任岗位职责
2014/02/12 职场文书
《小池塘》教学反思
2014/02/28 职场文书
医德考评自我评价
2014/09/14 职场文书
学习计划书怎么写
2014/09/15 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
MySQL Server层四个日志的实现
2022/03/31 MySQL