Angular實現(xiàn)響應式表單

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

本篇文章主要介紹了Angular實現(xiàn)響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

介紹

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

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

使用

接下來我們通過代碼例子來介紹如何使用響應式表單。

引入響應式表單模塊

在我們要使用響應式表單的那個模塊里面引入響應式表單模塊，比如我們在文章模塊中使用響應式表單，我們就要在 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 表單組以及創(chuàng)建一個評論對象 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": "內容不能為空"
 }
}

在組件啟動的函數(shù)中構造表單，這時候為每個字段添加了校驗器，并且綁定在什么時候觸發(fā)校驗，這里我們在每個值改變的時候觸發(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() 方法實現(xiàn)了判斷是那個字段校驗不通過，然后將該字段的 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” 這幾個點，并不是指具體的點，而是著重看這些語法的每一個地方，在你自己實現(xiàn)的時候需要根據(jù)你的代碼修改的。

還有一個是 (ngSubmit)=”sendComment()” 定義了該表單點擊提交時調用的函數(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

效果圖