快捷導(dǎo)航

Angular實(shí)現(xiàn)響應(yīng)式表單

更新時(shí)間：2017年08月04日 09:12:19 作者：1CSH1

本篇文章主要介紹了Angular實(shí)現(xiàn)響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

介紹

Angular 總共提供了 3 中表單實(shí)現(xiàn)方式，分別是：Template-driven Forms （模板驅(qū)動(dòng)表單）、 Reactive Forms （響應(yīng)式表單）、 Dynamic Forms （動(dòng)態(tài)表單）。本文只介紹響應(yīng)式表單。

響應(yīng)式表單是什么呢？其實(shí)跟我們以前用 JQuery 或者其他框架實(shí)現(xiàn)的思路差不多，就是使用 HTML 顯示數(shù)據(jù)，然后通過(guò)定義一定的校驗(yàn)器、校驗(yàn)規(guī)則以及校驗(yàn)提示語(yǔ)，通過(guò)事件觸發(fā)校驗(yàn)后校驗(yàn)不通過(guò)的顯示提示語(yǔ)，只不過(guò)用了 Angular，我們就使用 Angular 提供的語(yǔ)法來(lái)實(shí)現(xiàn)這個(gè)校驗(yàn)過(guò)程。

使用

接下來(lái)我們通過(guò)代碼例子來(lái)介紹如何使用響應(yīng)式表單。

引入響應(yīng)式表單模塊

在我們要使用響應(yīng)式表單的那個(gè)模塊里面引入響應(yīng)式表單模塊，比如我們?cè)谖恼履K中使用響應(yīng)式表單，我們就要在 imports 中添加 ReactiveFormsModule。代碼如下

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

編寫(xiě)校驗(yàn)器代碼

首先我們這里的表單有 3 個(gè)字段，分別是 nickname、email、content； nickname 添加必填校驗(yàn)器，email 添加必填和郵箱格式校驗(yàn)器，content添加必填校驗(yàn)器。

首先在 CommentComponent 中注入 FormBuilder 對(duì)象，并添加 commentForm 表單組以及創(chuàng)建一個(gè)評(píng)論對(duì)象 comment。

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

constructor(private formBuilder: FormBuilder){}

定義校驗(yàn)器的提示語(yǔ) validationMessages， formErrors 是在模板中顯示的提示語(yǔ)，提示語(yǔ)來(lái)自 validationMessages

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

public validationMessages = {
 "nickname": {
 "required": "昵稱不能為空",
 },
 "email": {
 "required": "郵箱不能為空",
 "pattern": "請(qǐng)輸入正確的郵箱地址"
 },
 "content": {
 "required": "內(nèi)容不能為空"
 }
}

在組件啟動(dòng)的函數(shù)中構(gòu)造表單，這時(shí)候?yàn)槊總€(gè)字段添加了校驗(yàn)器，并且綁定在什么時(shí)候觸發(fā)校驗(yàn)，這里我們?cè)诿總€(gè)值改變的時(shí)候觸發(fā)。

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() 方法實(shí)現(xiàn)了判斷是那個(gè)字段校驗(yàn)不通過(guò)，然后將該字段的 validationMessages 提示語(yǔ)賦值給 formErrors，在模板那里有判斷如果 formErrors.email 等等字段不為空則顯示改內(nèi)容，也即是校驗(yàn)器的提示語(yǔ)

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 模板代碼

我們要關(guān)注的是 [formGroup]=”commentForm”、novalidate、formControlName=”nickname”、以及 *ngIf=”formErrors.nickname” 這幾個(gè)點(diǎn)，并不是指具體的點(diǎn)，而是著重看這些語(yǔ)法的每一個(gè)地方，在你自己實(shí)現(xiàn)的時(shí)候需要根據(jù)你的代碼修改的。

還有一個(gè)是 (ngSubmit)=”sendComment()” 定義了該表單點(diǎn)擊提交時(shí)調(diào)用的函數(shù)。

<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

效果圖