欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular实现响应式表单

程序员文章站 2022-04-29 08:04:02
介绍 angular 总共提供了 3 中表单实现方式,分别是:template-driven forms (模板驱动表单) 、 reactive forms (响应式表单...

介绍

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实现响应式表单

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