angularcli 第五篇（輸入框、表單處理）

本文參考：Angular4 表單快速入門

注：涉及input表單時要在AppComponent中引入 FormsModule模塊:    

import{ FormsModule } from '@angular/forms';        @NgModule({ imports: [BrowserModule, FormsModule],})

 

目錄： 

1、在 Angular 表單中，通過 [(ngModel)]="username" 指令來實現數據雙向綁定

2、添加簡單的驗證功能

3、顯示表單驗證失敗的錯誤信息

4、創建表單（添加name屬性）

5、獲取表單提交的值

6、對表單輸入內容進行分組  ngModelGroup

7、為表單的驗證狀態添加樣式信息

8、為表單的驗證狀態添加樣式信息

9、使用單選控件

10、使用多選控件

11、為多選控件添加必填驗證

<!-- 下面的代碼均是html中，同時在typescript中要定義username的初始值 -->
username = 'semlinker';

 

1、簡單的輸入框（雙向綁定）

在angular表單中通過 ngModel 指令來實現雙向綁定。

<!-- 1、在 Angular 表單中，通過 [(ngModel)]="username" 指令來實現數據雙向綁定 -->

<input type="text" name="111" [(ngModel)]="username">
{{username}}   <!-- 獲取輸入框中輸入的值 -->

 

2、表單驗證功能

（1）目前 Angular 支持的內建 validators 如下：

• • required - 表單控件值是必填的

  • email - 表單控件值的格式是 email

  • minlength - 表單控件值的最小長度

  • maxlength - 表單控件值的最大長度

  • pattern - 表單控件的值需匹配 pattern 對應的模式

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

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

<!-- 2、添加簡單的驗證功能 -->
<input type="text" required [(ngModel)]="username" #userName="ngModel">{{userName.valid}}

 

3、顯示驗證失敗的錯誤信息

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

<!-- 3、顯示表單驗證失敗的錯誤信息 -->
    <input type="text" required minlength="3" [(ngModel)]="username" #userName="ngModel">     <!-- 必填、最小長度為3 -->
    <div *ngIf="userName.errors?.required">請您輸入用戶名</div>                                     <!-- 輸入框為空時提示“請輸入用戶名” -->
    <div *ngIf="userName.errors?.minlength">                                                      <!-- 長度小於最小長度時提示“用戶名長度必須大於xx，當前長度xx” -->
        用戶名的長度必須大於 {{userName.errors?.minlength.requiredLength}}，當前的長度為{{userName.errors?.minlength.actualLength}} 6     </div>

 

4、創建表單

使用<form> 標簽來創建表單，一定要注意在使用 <form> 標簽后，我們的 input 輸入框，必須添加 name 屬性。

<!-- 4、創建表單（添加name屬性） -->
  <form>
     <input name="userName" type="text" required minlength="3"[(ngModel)]="username" #userName="ngModel">
     <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>

 

5、獲取表單提交的值

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

<!-- 5、獲取表單提交的值 -->
   <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
     <input type="text" required minlength="3" name="username" [(ngModel)]="username" #userName="ngModel">
     <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}} 10    </form>

　　<!-- typescript的內容 -->
   export class AppComponent {
   username = 'semlinker';

 onSubmit(value) { 16  console.log(value); //打印出來是輸入框的值 17 }

 打印結果： 

 

6、對表單輸入內容進行分組  ngModelGroup

ngModelGroup 指令是 Angular 表單中提供的另一特殊指令，可以對表單輸入內容進行分組，方便我們在語義上區分不同性質的輸入。

例如聯系人的信息包括姓名及住址，現在需對姓名和住址進行精細化信息收集，姓名可精細化成姓和名字，地址可精細化成城市、區、街等。

<!-- 6、對表單輸入內容進行分組  ngModelGroup -->
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
    <fieldset ngModelGroup="user">
        <input type="text" required minlength="3" name="username" [(ngModel)]="username" #userName="ngModel">
        <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>
 {{loginForm.value | json}} 13 </form>

　<!-- typescript -->
export class AppComponent {
  username = 'semlinker';

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

以上代碼成功運行后，{{loginForm.value | json}} 和控制台的輸出結果：{ "user": { "username": "semlinker", "password": "123" } }

7、為表單的驗證狀態添加樣式信息 

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

<!-- 7、為表單的驗證狀態添加樣式信息 -->
2 <!-- 在上例的基礎上添加 css 代碼 -->
 　　
    input.ng-invalid {
        border: 3px solid red;
    }
    input.ng-valid {
        border: 3px solid green;
    }

 

8、表單控件的狀態

 在 Angular 中可以通過   #userName="ngModel" 方式獲取  ngModel 對象，進而獲取控件的狀態信息。

表單控件有以下 6 種狀態：

• • valid - 表單控件有效

  • invalid - 表單控件無效

  • pristine - 表單控件值未改變

  • dirty - 表單控件值已改變

  • touched - 表單控件已被訪問過

  • untouched - 表單控件未被訪問過

<!-- 8、為表單的驗證狀態添加樣式信息 -->
　　<input type="text" [(ngModel)]="username" #userName="ngModel">

　　<p>Name控件的valid狀態：{{userName.valid}} - 表示控件有效</p>
   <p>Name控件的invalid狀態：{{userName.invalid}} - 表示控件無效</p>
   <p>Name控件的pristine狀態：{{userName.pristine}} - 表示控件值未改變</p>
   <p>Name控件的dirty狀態：{{userName.dirty}} - 表示控件值已改變</p>
   <p>Name控件的touched狀態：{{userName.touched}} - 表示控件已被訪問過</p>
   <p>Name控件的untouched狀態：{{userName.untouched}} - 表示控件未被訪問過</p>

 

 

9、使用單選控件

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

<!-- 9、使用單選控件 -->
    <form #loginForm="ngForm">
        <div *ngFor="let color of colors;">
            <input [attr.id]="color" name="color" ngModel required [value]="color" type="radio">
            <label [attr.for]="color">{{color}}</label>
        </div>
        {{loginForm.value | json}}
      </form>

      <!-- typescript -->
      export class AppComponent {
        colors = ['紅色', '黃色', '藍色];
    }

 

9    <p>Name控件的untouched狀態：{{userName.untouched}} - 表示控件未被訪問過</p>

 

10、使用多選控件

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

<!-- 10、使用多選控件 -->
    <form #loginForm="ngForm">
        <select name="color" [ngModel]="colors[0]">
            <option *ngFor="let color of colors;" [value]="color">
                {{color}}
            </option>
        </select>
        {{loginForm.value | json}}
    </form>

    <!-- typescript -->
      export class AppComponent {
        colors = ['紅色', '黃色', '藍色];
    }

 

 

11、為多選控件添加必填驗證

<!-- 11、為多選控件添加必填驗證 -->
    <form #loginForm="ngForm">
        <div>
            <select name="color" [ngModel]="colors[0]" required>
                <option *ngFor="let color of colors;" [value]="color">
                    {{color}}
                </option>
            </select>
            <label></label>
        </div>
        {{loginForm.value | json}}
    </form>

    <!-- css -->
 select.ng-invalid + label:after {  content: '<-- 請做出選擇!'   } 18 
    <!-- typescript -->
      export class AppComponent {
        colors = ['紅色', '黃色', '藍色];
    }