詳解Angular4表單快速入門

基礎(chǔ)知識

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比海東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式海東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋海東地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

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)的知識點會以問答的形式進行介紹。

第一節(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)容進行分組，方便我們在語義上區(qū)分不同性質(zhì)的輸入。例如聯(lián)系人的信息包括姓名及住址，現(xià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);
 }
}

以上代碼成功運行后，{{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 對象，進而獲取控件的狀態(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'];
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：詳解Angular4表單快速入門
網(wǎng)站網(wǎng)址：http://sd-ha.com/article20/jiijco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站排名、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、虛擬主機、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

詳解Angular4表單快速入門