詳解Angular 4 表單快速入門
更新時間：2017年06月05日 10:19:11 作者：semlinker
本篇文章主要介紹了詳解Angular 4 表單快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
基礎(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 - 響應式表單
本文主要介紹 Template Driven Forms (模板驅(qū)動式表單) 的基礎(chǔ)知識，相關(guā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 對應的模式
接下來我們來添加最簡單的 必填 校驗。
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 屬性，來獲取對應驗證規(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}}，當前的長度為
{{userName.errors?.minlength.actualLength}}
</div>
`,
})
export class AppComponent {
username = 'semlinker';
}
第四節(jié) - 創(chuàng)建表單
如何使用表單？
在 Angular 中，我們可以使用熟悉的 <form> 標簽來創(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}}，當前的長度為
{{userName.errors?.minlength.actualLength}}
</div>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';
}
需要注意的是，在使用 <form> 標簽后，我們的 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}}，當前的長度為
{{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)容進行分組，方便我們在語義上區(qū)分不同性質(zhì)的輸入。例如聯(lián)系人的信息包括姓名及住址，現(xiàn)在需對姓名和住址進行精細化信息收集，姓名可精細化成姓和名字，地址可精細化成城市、區(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}}，當前的長度為
{{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);
}
}
以上代碼成功運行后，{{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}}，當前的長度為
{{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 對象，進而獲取控件的狀態(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}}，當前的長度為
{{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'];
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Angular Universal服務(wù)器端渲染避免 window is not&
這篇文章主要介紹了Angular Universal服務(wù)器端渲染避免 window is not defined錯誤消息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實現(xiàn)的。你可能會看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實它們在官方的文檔里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講2015-10-10
這篇文章主要介紹了簡述Angular 5 快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本篇文章主要介紹了ionic本地相冊、拍照、裁剪、上傳（單圖完全版），非常具有實用價值，需要的朋友可以參考下2017-10-10
本文給大家分享的是個人在項目中使用angularjs實現(xiàn)表格分頁功能的思路和代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-01-01
詳解angular筆記路由之a(chǎn)ngular-router
本篇文章主要介紹了詳解angular筆記路由之a(chǎn)ngular-router，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了AngularJS中的攔截器實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Angular.js中上傳指令ng-upload的基本使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js中上傳指令ng-upload的基本使用方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07