99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

表單快速入門(mén)

2018-08-28 10:30 更新

查看新版Angular 6.x 表單快速入門(mén)

主要內(nèi)容

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

閱讀須知

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

基礎(chǔ)知識(shí)

Angular CLI 基本使用

npm install -g @angular/cli

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

ng new PROJECT-NAME

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

cd PROJECT-NAME
ng serve

Angular Forms 簡(jiǎn)介

Angular 4 中有兩種表單：

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

本文主要介紹 Template Driven Forms (模板驅(qū)動(dòng)式表單) 的基礎(chǔ)知識(shí)，相關(guān)的知識(shí)點(diǎn)會(huì)以問(wèn)答的形式進(jìn)行介紹。

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

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

在 Angular 表單中，我們通過(guò) ngModel 指令來(lái)實(shí)現(xiàn)雙向綁定。

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


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

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

如何為表單控件添加驗(yàn)證功能？

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

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

接下來(lái)我們來(lái)添加最簡(jiǎn)單的 必填 校驗(yàn)。

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


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

如何判斷表單控件是否通過(guò)驗(yàn)證？

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

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é) - 顯示驗(yàn)證失敗的錯(cuò)誤信息

如何顯示驗(yàn)證失敗的錯(cuò)誤信息？

在 Angular 中，我們可以通過(guò) #userName="ngModel" 方式獲取 ngModel 對(duì)象，然后通過(guò)該對(duì)象的 errors 屬性，來(lái)獲取對(duì)應(yīng)驗(yàn)證規(guī)則 (如 required, minlength 等) 的驗(yàn)證狀態(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">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎng)度為
        {{userName.errors?.minlength.actualLength}}
    </div>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

如何使用表單？

在 Angular 中，我們可以使用熟悉的 <form> 標(biāo)簽來(lái)創(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">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎng)度為
        {{userName.errors?.minlength.actualLength}}
    </div>
    <button type="submit">提交</button>
  </form>
  `,
})
export class AppComponent {
  username = 'semlinker';
}

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

如何獲取表單提交的值？

在 Angular 中，我們可以通過(guò) #loginForm="ngForm" 方式獲取 ngForm 對(duì)象，然后通過(guò) loginForm.value 來(lái)獲取表單的值。

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">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎ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簡(jiǎn)介

ngModelGroup 有什么作用？

ngModelGroup 指令是 Angular 表單中提供的另一特殊指令，可以對(duì)表單輸入內(nèi)容進(jìn)行分組，方便我們?cè)谡Z(yǔ)義上區(qū)分不同性質(zhì)的輸入。例如聯(lián)系人的信息包括姓名及住址，現(xiàn)在需對(duì)姓名和住址進(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">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎ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é) - 表單添加驗(yàn)證狀態(tài)樣式

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

在 Angular 表單中，若驗(yàn)證通過(guò)則會(huì)在表單控件上添加 ng-valid 類(lèi)，若驗(yàn)證失敗則會(huì)在表單控件上添加 ng-invalid 類(lèi)。

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">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎ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)，我們可以通過(guò) #userName="ngModel" 方式獲取 ngModel 對(duì)象，進(jìn)而獲取控件的狀態(tài)信息。具體狀態(tài)如下：

  • valid - 表單控件有效
  • invalid - 表單控件無(wú)效
  • pristine - 表單控件值未改變
  • dirty - 表單控件值已改變
  • touched - 表單控件已被訪問(wèn)過(guò)
  • untouched - 表單控件未被訪問(wèn)過(guò)

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}} - 表示控件無(wú)效</p>
    <p>Name控件的pristine狀態(tài)：{{userName.pristine}} - 表示控件值未改變</p>
    <p>Name控件的dirty狀態(tài)：{{userName.dirty}} - 表示控件值已改變</p>
    <p>Name控件的touched狀態(tài)：{{userName.touched}} - 表示控件已被訪問(wèn)過(guò)</p>
    <p>Name控件的untouched狀態(tài)：{{userName.untouched}} - 表示控件未被訪問(wèn)過(guò)</p>
    <div *ngIf="userName.errors?.required">請(qǐng)您輸入用戶名</div>
    <div *ngIf="userName.errors?.minlength">
      用戶名的長(zhǎng)度必須大于 {{userName.errors?.minlength.requiredLength}}，當(dāng)前的長(zhǎ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 中，我們通過(guò) <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 中，我們通過(guò) <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'];
}

如何添加必填驗(yàn)證？

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


@Component({
  selector: 'app-root',
  styles: [`
   select.ng-invalid + label:after {
      content: '<-- 請(qǐng)選擇版本!'
    }
  `
  ],
  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)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)