Angular实现响应式表单


Posted in Javascript onAugust 04, 2017

介绍

Angular 总共提供了 3 中表单实现方式,分别是:Template-driven Forms (模板驱动表单) 、 Reactive Forms (响应式表单) 、 Dynamic Forms (动态表单) 。本文只介绍响应式表单。

响应式表单是什么呢?其实跟我们以前用 JQuery 或者其他框架实现的思路差不多,就是使用 HTML 显示数据,然后通过定义一定的校验器、校验规则以及校验提示语,通过事件触发校验后校验不通过的显示提示语,只不过用了 Angular,我们就使用 Angular 提供的语法来实现这个校验过程。

使用

接下来我们通过代码例子来介绍如何使用响应式表单。

引入响应式表单模块

在我们要使用响应式表单的那个模块里面引入响应式表单模块,比如我们在文章模块中使用响应式表单,我们就要在 imports 中添加 ReactiveFormsModule。代码如下

@NgModule({
 imports: [
 RouterModule,
 RouterModule.forChild(articleRoutes),
 SharedModule,
 ReactiveFormsModule,
 NgbModule.forRoot()
 ],
 declarations: [
 HomeComponent,
 DetailComponent,
 CommentComponent,
 CommentViewComponent
 ],
 providers: [
 HomeService,
 DetailService,
 CommentService
 ]
})
export class ArticleModule { }

编写校验器代码

首先我们这里的表单有 3 个字段,分别是 nickname、email、content; nickname 添加必填校验器,email 添加必填和邮箱格式校验器,content添加必填校验器。

首先在 CommentComponent 中注入 FormBuilder 对象,并添加 commentForm 表单组以及创建一个评论对象 comment。

public commentForm: FormGroup;
public comment: Comment = new Comment();

constructor(private formBuilder: FormBuilder){}

定义校验器的提示语 validationMessages, formErrors 是在模板中显示的提示语,提示语来自 validationMessages

public formErrors = {
 "nickname": "",
 "email": "",
 "content": "",
 "formError": ""
}

public validationMessages = {
 "nickname": {
 "required": "昵称不能为空",
 },
 "email": {
 "required": "邮箱不能为空",
 "pattern": "请输入正确的邮箱地址"
 },
 "content": {
 "required": "内容不能为空"
 }
}

在组件启动的函数中构造表单,这时候为每个字段添加了校验器,并且绑定在什么时候触发校验,这里我们在每个值改变的时候触发。

ngOnInit(): void {
 this.buildForm();
}

private buildForm() {
 this.commentForm = this.formBuilder.group({
 "nickname":[
  this.comment.nickname,
  [
  Validators.required
  ]
 ],
 "email": [
  this.comment.email,
  [
  Validators.required,
  Validators.pattern("^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$")
  ]
 ],
 "content": [
  this.comment.content,
  [
  Validators.required
  ]
 ]
 });
 this.commentForm.valueChanges.subscribe(data => this.onValueChanged(data));
 this.onValueChanged();
}

onValueChanged() 方法实现了判断是那个字段校验不通过,然后将该字段的 validationMessages 提示语赋值给 formErrors,在模板那里有判断如果 formErrors.email 等等字段不为空则显示改内容,也即是校验器的提示语

onValueChanged(data?: any) {
 if (!this.commentForm) {
 return;
 }
 const form = this.commentForm;
 for (const field in this.formErrors) {
 this.formErrors[field] = '';
 const control = form.get(field);
 if (control && control.dirty && !control.valid) {
  const messages = this.validationMessages[field];
  for (const key in control.errors) {
  this.formErrors[field] += messages[key] + ' ';
  }
 }
 }

}

HTML 模板代码

我们要关注的是 [formGroup]=”commentForm”、novalidate、formControlName=”nickname”、以及 *ngIf=”formErrors.nickname” 这几个点,并不是指具体的点,而是着重看这些语法的每一个地方,在你自己实现的时候需要根据你的代码修改的。

还有一个是 (ngSubmit)=”sendComment()” 定义了该表单点击提交时调用的函数。

<form [formGroup]="commentForm" (ngSubmit)="sendComment()" role="form" novalidate>
 <div class="control-group">
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.nickname}">
  <label>{{ 'comment.nickname' | translate }}</label>
  <input formControlName="nickname" type="text" class="form-control" placeholder="{{ 'comment.nickname' | translate }}">
  <p *ngIf="formErrors.nickname" class="help-block text-danger">
  {{ formErrors.nickname }}
  </p>
 </div>
 </div>
 <div class="control-group" >
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.email}">
  <label>{{ 'comment.email' | translate }}</label>
  <input formControlName="email" type="email" class="form-control" placeholder="{{ 'comment.email' | translate }}">
  <p *ngIf="formErrors.email" class="help-block text-danger">
  {{ formErrors.email }}
  </p>
 </div>
 </div>
 <div class="control-group">
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.content}">
  <label>{{ 'comment.content' | translate }}</label>
  <textarea formControlName="content" rows="5" class="form-control" placeholder="{{ 'comment.content' | translate }}"></textarea>
  <p *ngIf="formErrors.content" class="help-block text-danger">
  {{ formErrors.content }}
  </p>
 </div>
 </div>
 <p *ngIf="formErrors.formError" class="help-block text-danger">
 {{ formErrors.formError }}
 </p>
 <br>
 <div id="success"></div>
 <div class="form-group">
 <button [disabled]="commentForm.invalid" type="submit" class="btn btn-secondary" >{{ 'comment.submit' | translate }}</button>
 </div>
</form>

GitHub 代码

参考文章

Reactive Forms

效果图

Angular实现响应式表单

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

Javascript 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 #Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 #Javascript
js模拟百度模糊搜索的实例
Aug 04 #Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 #Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 #Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
You might like
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
详解JavaScript函数
2015/12/01 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
微信小程序的生命周期的详解
2017/10/19 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
django文档学习之applications使用详解
2018/01/29 Python
python中的tcp示例详解
2018/12/09 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python Selenium截图功能实现代码
2020/04/26 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
2014年国培研修感言
2014/03/09 职场文书
社区禁毒工作方案
2014/06/02 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2016中秋节广告语
2016/01/28 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript