Angular实现响应式表单

程序员文章站 2022-09-08 13:49:21

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