Angular 4 表單快速入門

主要內(nèi)容

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

閱讀須知

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

Angular 4 +
Angular CLI
TypeScript

基礎(chǔ)知識

Angular CLI 基本使用

安裝 Angular CLI (可選)

npm install -g @angular/cli

創(chuàng)建新的項目

ng new PROJECT-NAME

啟動本地服務(wù)器

cd PROJECT-NAME
ng serve

Angular Forms 簡介

Angular 4 中有兩種表單：

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

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

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="username">
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

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

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username">
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username"
     #userName="ngModel">
    {{userName.valid}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     minlength="3"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

如何使用表單播揪？

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form>
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}雇庙，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

如何獲取表單提交的值胸完？

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}誓琼，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <button type="submit">提交</button>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

第五節(jié) - ngModelGroup簡介

ngModelGroup 有什么作用腹侣？

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}盏筐，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

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

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

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}坤按，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" required ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

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

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <p>Name控件的valid狀態(tài)：{{userName.valid}} - 表示控件有效</p>
    <p>Name控件的invalid狀態(tài)：{{userName.invalid}} - 表示控件無效</p>
    <p>Name控件的pristine狀態(tài)：{{userName.pristine}} - 表示控件值未改變</p>
    <p>Name控件的dirty狀態(tài)：{{userName.dirty}} - 表示控件值已改變</p>
    <p>Name控件的touched狀態(tài)：{{userName.touched}} - 表示控件已被訪問過</p>
    <p>Name控件的untouched狀態(tài)：{{userName.untouched}} - 表示控件未被訪問過</p>
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}领猾，當(dāng)前的長度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" required ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

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

如何添加單選控件摔竿？

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm">
    Angular版本：
    <div *ngFor="let version of versions;">
        <input 
          [attr.id]="version"
           name="version"
           ngModel
           required
           [value]="version"
            type="radio">
         <label [attr.for]="version">{{version}}</label>
      </div>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}

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

如何添加多選控件郁季？

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm">
    Angular版本：
    <select name="version" [ngModel]="versions[0]">
        <option
         *ngFor="let version of versions;"
          [value]="version">
            {{version}}
        </option>
      </select>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}

如何添加必填驗證盖淡？

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   select.ng-invalid + label:after {
      content: '<-- 請選擇版本!'
    }
  `
  ],
  template: `
  <form #loginForm="ngForm">
    Angular版本：
    <div>
      <select name="version" [ngModel]="version" required>
        <option
        *ngFor="let version of versions;"
          [value]="version">
          {{version}}
        </option>
      </select>
      <label></label>
    </div>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
})
export class AppComponent {
  versions = ['','1.x', '2.x', '3.x'];
}

最后編輯于：2017.12.08 01:27:24

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末褪迟，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子掀抹，更是在濱河造成了極大的恐慌心俗，老刑警劉巖，帶你破解...
沈念sama閱讀 207,113評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件揪利，死亡現(xiàn)場離奇詭異狠持，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)甜刻，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門正勒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人尿招，你說我怎么就攤上這事阱驾。” “怎么了丧荐？”我有些...
開封第一講書人閱讀 153,340評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵喧枷，是天一觀的道長弓坞。經(jīng)常有香客問我车荔，道長，這世上最難降的妖魔是什么族吻？我笑而不...
開封第一講書人閱讀 55,449評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任珠增，我火速辦了婚禮，結(jié)果婚禮上巍举，老公的妹妹穿的比我還像新娘凝垛。我一直安慰自己，他們只是感情好苔严，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布届氢。她就那樣靜靜地躺著，像睡著了一般岖妄。火紅的嫁衣襯著肌膚如雪寂祥。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,166評論 1贊 284
城市分裂傳說
那天丸凭，我揣著相機(jī)與錄音惜犀，去河邊找鬼。笑死虽界，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的撇吞。我是一名探鬼主播，決...
沈念sama閱讀 38,442評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼迄薄，長吁一口氣：“原來是場噩夢啊……” “哼煮岁！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起人乓，我...
開封第一講書人閱讀 37,105評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤色罚，失蹤者是張志新（化名）和其女友劉穎账劲，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瀑焦，經(jīng)...
沈念sama閱讀 43,601評論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡榛瓮，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了精续。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粹懒。...
茶點(diǎn)故事閱讀 38,161評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖确垫，靈堂內(nèi)的尸體忽然破棺而出帽芽，到底是詐尸還是另有隱情，我是刑警寧澤爬迟，帶...
沈念sama閱讀 33,792評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布菊匿，位于F島的核電站计福，受9級特大地震影響徽职，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜姆钉，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一潮瓶、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧毯辅，春花似錦、人聲如沸沾谜。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽媳否。三九已至栈顷，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間萄凤，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,584評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工坪圾，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留惑朦，地道東北人。一個月前我還...
沈念sama閱讀 45,618評論 2贊 355
代替公主和親
正文我出身青樓病梢，卻偏偏與公主長得像，于是被迫代替她去往敵國和親觅彰。傳聞我的和親對象是個殘疾皇子钮热，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評論 2贊 344