Angular 4 - 表單

上一頁
下一頁

在本章中，我們將瞭解如何在 Angular 4 中使用表單。我們將討論兩種處理表單的方式——模板驅動表單和模型驅動表單。

模板驅動表單

使用模板驅動表單，大部分工作都在模板中完成；而使用模型驅動表單，大部分工作都在元件類中完成。

現在讓我們考慮使用模板驅動表單。我們將建立一個簡單的登入表單，並在表單中新增電子郵件 ID、密碼和提交按鈕。首先，我們需要從@angular/core匯入FormsModule，這在app.module.ts中完成，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

因此，在app.module.ts中，我們匯入了 FormsModule，並在 imports 陣列中添加了它，如突出顯示的程式碼所示。

現在讓我們在app.component.html檔案中建立我們的表單。

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

我們建立了一個簡單的表單，其中包含具有電子郵件 ID、密碼和提交按鈕的輸入標籤。我們為它分配了型別、名稱和佔位符。

在模板驅動表單中，我們需要透過新增ngModel指令和name屬性來建立模型表單控制元件。因此，無論我們希望 Angular 從表單中訪問我們的資料在哪裡，都要向該標籤新增 ngModel，如上所示。現在，如果我們必須讀取 emailid 和 passwd，我們需要在其上新增 ngModel。

如果您看到，我們還將 ngForm 新增到了#userlogin。ngForm指令需要新增到我們建立的表單模板中。我們還添加了函式onClickSubmit 並將其賦值為userlogin.value。

現在讓我們在app.component.ts中建立函式並獲取在表單中輸入的值。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

在上面的app.component.ts檔案中，我們定義了函式 onClickSubmit。當您單擊表單提交按鈕時，控制權將轉移到上述函式。

瀏覽器顯示如下：

onClickSubmit Login

表單外觀如下所示。讓我們在其中輸入資料，在提交函式中，電子郵件 ID 已經輸入。

Email Enterd Login

電子郵件 ID 如上圖所示顯示在底部。

模型驅動表單

在模型驅動表單中，我們需要從 @angular/forms 匯入 ReactiveFormsModule，並在 imports 陣列中使用它。

app.module.ts中會發生更改。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.ts中，我們需要為模型驅動表單匯入一些模組。例如，import { FormGroup, FormControl } from '@angular/forms'。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("angular@gmail.com"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

變數 formdata 在類的開頭初始化，並如上所示使用 FormGroup 初始化。變數 emailid 和 passwd 使用預設值初始化，以便在表單中顯示。如果您願意，可以將其保留為空。

表單 UI 中將顯示這些值。

Form UI

我們使用 formdata 初始化表單值；我們需要在表單 UI app.component.html中使用它。

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid" 
         formControlName="emailid">
      <br/>
      
      <input type="password" class="fortextbox" name="passwd" 
         placeholder="passwd" formControlName="passwd">
      <br/>
      
      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

在 .html 檔案中，我們在方括號中使用了 formGroup 用於表單；例如，[formGroup]=”formdata”。提交時，將呼叫函式onClickSubmit，並向其傳遞formdata.value。

使用了 input 標籤formControlName。它被賦予我們在app.component.ts檔案中使用的值。

單擊提交後，控制權將傳遞給在app.component.ts檔案中定義的函式onClickSubmit。

Screenshot onClickSubmit Event

單擊登入後，將顯示如下圖所示的值。

表單驗證

現在讓我們討論使用模型驅動表單進行表單驗證。您可以使用內建的表單驗證，也可以使用自定義驗證方法。我們將在表單中使用這兩種方法。我們將繼續使用我們在前面部分建立的相同示例。使用 Angular 4，我們需要從@angular/forms匯入 Validators，如下所示：

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular 具有內建的驗證器，例如必填欄位、最小長度、最大長度和模式。這些需要使用 Validators 模組訪問。

您可以只新增所需的驗證器或驗證器陣列，以告知 Angular 特定欄位是否為必填欄位。

現在讓我們在一個輸入文字框（即電子郵件 ID）上嘗試相同操作。對於電子郵件 ID，我們添加了以下驗證引數：

  • 必填
  • 模式匹配

這就是程式碼如何在app.component.ts中進行驗證的方式。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

在Validators.compose中，您可以新增要在輸入欄位上驗證的內容列表。現在，我們添加了required和pattern matching引數，以僅接受有效的電子郵件。

在app.component.html中，如果任何表單輸入無效，則提交按鈕將被停用。操作方法如下：

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

對於提交按鈕，我們在方括號中添加了 disabled，其值為!formdata.valid。因此，如果 formdata.valid 無效，則按鈕將保持停用狀態，使用者將無法提交它。

讓我們看看它在瀏覽器中的工作方式：

!formdata.valid Event Output

在上述情況下，輸入的電子郵件 ID 無效，因此登入按鈕被停用。現在讓我們嘗試輸入有效的電子郵件 ID 並檢視區別。

Disabled Login Button

現在，輸入的電子郵件 ID 有效。因此，我們可以看到登入按鈕已啟用，使用者將能夠提交它。這樣，輸入的電子郵件 ID 將顯示在底部。

現在讓我們嘗試使用相同表單進行自定義驗證。對於自定義驗證，我們可以定義我們自己的自定義函式並在其中新增所需詳細資訊。我們現在將看到一個示例。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

在上面的示例中，我們建立了一個函式password validation，並在前面的部分中在 formcontrol 中使用了它 - passwd: new FormControl("", this.passwordvalidation)。

在我們建立的函式中，我們將檢查輸入字元的長度是否合適。如果字元少於五個，它將返回 passwd true，如上所示 - return {"passwd" : true};。如果字元超過五個，則將其視為有效，並且登入將被啟用。

現在讓我們看看它在瀏覽器中的顯示方式：

Three Characters Entered In Password

我們在密碼中只輸入了三個字元，登入被停用。要啟用登入，我們需要超過五個字元。現在讓我們輸入有效長度的字元並檢查。

Valid ID Password Enables Login

電子郵件 ID 和密碼均有效，因此登入已啟用。登入時，電子郵件將顯示在底部。

列印頁面
上一頁
下一頁
廣告