表單快速入門

2018-08-28 10:30 更新

查看新版Angular 6.x 表單快速入門

主要內(nèi)容

  • 第一節(jié) - 創(chuàng)建最簡單的輸入框
  • 第二節(jié) - 添加簡單的驗證功能
  • 第三節(jié) - 顯示驗證失敗的錯誤信息
  • 第四節(jié) - 創(chuàng)建表單
  • 第五節(jié) - ngModelGroup簡介
  • 第六節(jié) - 表單添加驗證狀態(tài)樣式
  • 第七節(jié) - 表單控件的狀態(tài)
  • 第八節(jié) - 使用單選控件
  • 第九節(jié) - 使用多選控件

閱讀須知

本教程的開發(fā)環(huán)境及開發(fā)語言：

基礎(chǔ)知識

Angular CLI 基本使用

  1. npm install -g @angular/cli

  • 創(chuàng)建新的項目

  1. ng new PROJECT-NAME

  • 啟動本地服務(wù)器

  1. cd PROJECT-NAME
  2. ng serve

Angular Forms 簡介

Angular 4 中有兩種表單：

  • Template Driven Forms - 模板驅(qū)動式表單 (類似于 AngularJS 1.x 中的表單 )
  • Reactive Forms - 響應(yīng)式表單

本文主要介紹 Template Driven Forms (模板驅(qū)動式表單) 的基礎(chǔ)知識，相關(guān)的知識點會以問答的形式進行介紹。

第一節(jié) - 創(chuàng)建最簡單的輸入框

如何實現(xiàn)雙向綁定？

在 Angular 表單中，我們通過 ngModel 指令來實現(xiàn)雙向綁定。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.     <input type="text" [(ngModel)]="username">
  8.     {{username}}
  9.   `,
  10. })
  11. export class AppComponent {
  12.   username = 'semlinker';
  13. }

第二節(jié) - 添加簡單的驗證功能

如何為表單控件添加驗證功能？

目前 Angular 支持的內(nèi)建 validators 如下：

  • required - 設(shè)置表單控件值是非空的
  • email - 設(shè)置表單控件值的格式是 email
  • minlength - 設(shè)置表單控件值的最小長度
  • maxlength - 設(shè)置表單控件值的最大長度
  • pattern - 設(shè)置表單控件的值需匹配 pattern 對應(yīng)的模式

接下來我們來添加最簡單的 必填 校驗。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.     <input 
  8.      type="text" 
  9.      required
  10.      [(ngModel)]="username">
  11.     {{username}}
  12.   `,
  13. })
  14. export class AppComponent {
  15.   username = 'semlinker';
  16. }

如何判斷表單控件是否通過驗證？

在 Angular 中，我們可以通過 #userName="ngModel" 方式獲取 ngModel 對象，然后通過 userName.valid 判斷表單控件是否通過驗證。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.     <input 
  8.      type="text" 
  9.      required
  10.      [(ngModel)]="username"
  11.      #userName="ngModel">
  12.     {{userName.valid}}
  13.   `,
  14. })
  15. export class AppComponent {
  16.   username = 'semlinker';
  17. }

第三節(jié) - 顯示驗證失敗的錯誤信息

如何顯示驗證失敗的錯誤信息？

在 Angular 中，我們可以通過 #userName="ngModel" 方式獲取 ngModel 對象，然后通過該對象的 errors 屬性，來獲取對應(yīng)驗證規(guī)則 (如 required, minlength 等) 的驗證狀態(tài)。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.     <input 
  8.      type="text" 
  9.      required
  10.      minlength="3"
  11.      [(ngModel)]="username"
  12.      #userName="ngModel">
  13.     <hr>
  14.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  15.     <div *ngIf="userName.errors?.minlength">
  16.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  17.         {{userName.errors?.minlength.actualLength}}
  18.     </div>
  19.   `,
  20. })
  21. export class AppComponent {
  22.   username = 'semlinker';
  23. }

第四節(jié) - 創(chuàng)建表單

如何使用表單？

在 Angular 中，我們可以使用熟悉的 <form> 標(biāo)簽來創(chuàng)建表單。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.   <form>
  8.     <input 
  9.      type="text" 
  10.      required
  11.      minlength="3"
  12.      name="username"
  13.      [(ngModel)]="username"
  14.      #userName="ngModel">
  15.     <hr>
  16.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  17.     <div *ngIf="userName.errors?.minlength">
  18.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  19.         {{userName.errors?.minlength.actualLength}}
  20.     </div>
  21.     <button type="submit">提交</button>
  22.   </form>
  23.   `,
  24. })
  25. export class AppComponent {
  26.   username = 'semlinker';
  27. }

需要注意的是，在使用 <form> 標(biāo)簽后，我們的 username 輸入框，必須添加 name 屬性。

如何獲取表單提交的值？

在 Angular 中，我們可以通過 #loginForm="ngForm" 方式獲取 ngForm 對象，然后通過 loginForm.value 來獲取表單的值。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.   <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  8.     <input 
  9.      type="text" 
  10.      required
  11.      minlength="3"
  12.      name="username"
  13.      [(ngModel)]="username"
  14.      #userName="ngModel">
  15.     <hr>
  16.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  17.     <div *ngIf="userName.errors?.minlength">
  18.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  19.         {{userName.errors?.minlength.actualLength}}
  20.     </div>
  21.     <button type="submit">提交</button>
  22.     {{loginForm.value | json}}
  23.   </form>
  24.   `,
  25. })
  26. export class AppComponent {
  27.   username = 'semlinker';
  30.   onSubmit(value) {
  31.     console.dir(value);
  32.   }
  33. }

第五節(jié) - ngModelGroup簡介

ngModelGroup 有什么作用？

ngModelGroup 指令是 Angular 表單中提供的另一特殊指令，可以對表單輸入內(nèi)容進行分組，方便我們在語義上區(qū)分不同性質(zhì)的輸入。例如聯(lián)系人的信息包括姓名及住址，現(xiàn)在需對姓名和住址進行精細(xì)化信息收集，姓名可精細(xì)化成姓和名字，地址可精細(xì)化成城市、區(qū)、街等。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.   <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  8.    <fieldset ngModelGroup="user">
  9.     <input 
  10.      type="text" 
  11.      required
  12.      minlength="3"
  13.      name="username"
  14.      [(ngModel)]="username"
  15.      #userName="ngModel">
  16.     <hr>
  17.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  18.     <div *ngIf="userName.errors?.minlength">
  19.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  20.         {{userName.errors?.minlength.actualLength}}
  21.     </div>
  22.     <input type="password" ngModel name="password">
  23.    </fieldset>
  24.     <button type="submit">提交</button>
  25.     <hr>
  26.     {{loginForm.value | json}}
  27.   </form>
  28.   `,
  29. })
  30. export class AppComponent {
  31.   username = 'semlinker';
  34.   onSubmit(value) {
  35.     console.dir(value);
  36.   }
  37. }

以上代碼成功運行后，{{loginForm.value | json}} 的輸出結(jié)果：

  1. { "user": { "username": "semlinker", "password": "123" } }

第六節(jié) - 表單添加驗證狀態(tài)樣式

如何為表單添加驗證狀態(tài)樣式信息？

在 Angular 表單中，若驗證通過則會在表單控件上添加 ng-valid 類，若驗證失敗則會在表單控件上添加 ng-invalid 類。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   styles: [`
  7.    input.ng-invalid {
  8.        border: 3px solid red;
  9.     }
  10.    input.ng-valid {
  11.        border: 3px solid green;
  12.     }
  13.   `
  14.   ],
  15.   template: `
  16.   <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  17.    <fieldset ngModelGroup="user">
  18.     <input 
  19.      type="text" 
  20.      required
  21.      minlength="3"
  22.      name="username"
  23.      [(ngModel)]="username"
  24.      #userName="ngModel">
  25.     <hr>
  26.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  27.     <div *ngIf="userName.errors?.minlength">
  28.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  29.         {{userName.errors?.minlength.actualLength}}
  30.     </div>
  31.     <input type="password" required ngModel name="password">
  32.    </fieldset>
  33.     <button type="submit">提交</button>
  34.     <hr>
  35.     {{loginForm.value | json}}
  36.   </form>
  37.   `,
  38. })
  39. export class AppComponent {
  40.   username = 'semlinker';
  43.   onSubmit(value) {
  44.     console.dir(value);
  45.   }
  46. }

第七節(jié) - 表單控件的狀態(tài)

表單控件除了 valid 狀態(tài)外，還包含哪些狀態(tài)？

在 Angular 中表單控件有以下 6 種狀態(tài)，我們可以通過 #userName="ngModel" 方式獲取 ngModel 對象，進而獲取控件的狀態(tài)信息。具體狀態(tài)如下：

  • valid - 表單控件有效
  • invalid - 表單控件無效
  • pristine - 表單控件值未改變
  • dirty - 表單控件值已改變
  • touched - 表單控件已被訪問過
  • untouched - 表單控件未被訪問過

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   styles: [`
  7.    input.ng-invalid {
  8.        border: 3px solid red;
  9.     }
  10.    input.ng-valid {
  11.        border: 3px solid green;
  12.     }
  13.   `
  14.   ],
  15.   template: `
  16.   <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  17.    <fieldset ngModelGroup="user">
  18.     <input 
  19.      type="text" 
  20.      required
  21.      minlength="3"
  22.      name="username"
  23.      [(ngModel)]="username"
  24.      #userName="ngModel">
  25.     <hr>
  26.     <p>Name控件的valid狀態(tài)：{{userName.valid}} - 表示控件有效</p>
  27.     <p>Name控件的invalid狀態(tài)：{{userName.invalid}} - 表示控件無效</p>
  28.     <p>Name控件的pristine狀態(tài)：{{userName.pristine}} - 表示控件值未改變</p>
  29.     <p>Name控件的dirty狀態(tài)：{{userName.dirty}} - 表示控件值已改變</p>
  30.     <p>Name控件的touched狀態(tài)：{{userName.touched}} - 表示控件已被訪問過</p>
  31.     <p>Name控件的untouched狀態(tài)：{{userName.untouched}} - 表示控件未被訪問過</p>
  32.     <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
  33.     <div *ngIf="userName.errors?.minlength">
  34.       用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
  35.         {{userName.errors?.minlength.actualLength}}
  36.     </div>
  37.     <input type="password" required ngModel name="password">
  38.    </fieldset>
  39.     <button type="submit">提交</button>
  40.     <hr>
  41.     {{loginForm.value | json}}
  42.   </form>
  43.   `,
  44. })
  45. export class AppComponent {
  46.   username = 'semlinker';
  49.   onSubmit(value) {
  50.     console.dir(value);
  51.   }
  52. }

第八節(jié) - 使用單選控件

如何添加單選控件？

在 Angular 中，我們通過 <input name="***" type="radio"> 方式添加單選控件。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.   <form #loginForm="ngForm">
  8.     Angular版本：
  9.     <div *ngFor="let version of versions;">
  10.         <input 
  11.           [attr.id]="version"
  12.            name="version"
  13.            ngModel
  14.            required
  15.            [value]="version"
  16.             type="radio">
  17.          <label [attr.for]="version">{{version}}</label>
  18.       </div>
  19.     <hr>
  20.     {{loginForm.value | json}}
  21.   </form>
  22.   `,
  23. })
  24. export class AppComponent {
  25.   versions = ['1.x', '2.x', '3.x'];
  26. }

第九節(jié) - 使用多選控件

如何添加多選控件？

在 Angular 中，我們通過 <select name="***"> 方式添加多選控件。

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   template: `
  7.   <form #loginForm="ngForm">
  8.     Angular版本：
  9.     <select name="version" [ngModel]="versions[0]">
  10.         <option
  11.          *ngFor="let version of versions;"
  12.           [value]="version">
  13.             {{version}}
  14.         </option>
  15.       </select>
  16.     <hr>
  17.     {{loginForm.value | json}}
  18.   </form>
  19.   `,
  20. })
  21. export class AppComponent {
  22.   versions = ['1.x', '2.x', '3.x'];
  23. }

如何添加必填驗證？

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'app-root',
  6.   styles: [`
  7.    select.ng-invalid + label:after {
  8.       content: '<-- 請選擇版本!'
  9.     }
  10.   `
  11.   ],
  12.   template: `
  13.   <form #loginForm="ngForm">
  14.     Angular版本：
  15.     <div>
  16.       <select name="version" [ngModel]="version" required>
  17.         <option
  18.         *ngFor="let version of versions;"
  19.           [value]="version">
  20.           {{version}}
  21.         </option>
  22.       </select>
  23.       <label></label>
  24.     </div>
  25.     <hr>
  26.     {{loginForm.value | json}}
  27.   </form>
  28.   `,
  29. })
  30. export class AppComponent {
  31.   versions = ['','1.x', '2.x', '3.x'];
  32. }
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號