iT邦幫忙

2024 iThome 鐵人賽
DAY 12
0
Modern Web

從零開始：全端新手的困境與成長系列 第 12 篇

Day12 掌握 Angular Material 更多元件與表單驗證：讓應用更強大

16th鐵人賽 angular material 表單驗證 前端開發 ui 元件設計
158 瀏覽

  • 分享至 

  • xImage
    •  

在昨天的文章中，我們探索了如何使用 Angular Material 來簡化基礎元件的開發，並且了解到善用現成工具能大大提升效率。今天，我們將深入探討更多的元件和表單驗證，這些功能是開發更複雜的應用方式。在實際專案中，表單驗證和更多的 UI 元件是不可或缺的，尤其當我們需要處理與大量使用者互動時。

https://ithelp.ithome.com.tw/upload/images/20240920/20168326egghvo3PVm.png

文章大綱：

  1. 更多元件與表單驗證的挑戰
  2. 探索更多元件
  3. 實踐表單與驗證
  4. 建立一個完整的登入頁面
  5. 掌握進階技能，從小處開始

1. 更多元件與表單驗證的挑戰

當學習元件和表單驗證時，很多初學者可能會感到複雜和困惑。尤其像是 Dialog 和 Card 的設定過程中，涉及到比較複雜的設定，會困難許多。同時，表單驗證也包含多層次的邏輯處理，會讓新手感到這部分學習又更複雜。

我們可以這樣想想：

  • 不要太急一次掌握所有技術。先學習基本概念，隨著專案的慢慢擴展知識。
  • 將注意力放在具體的應用情境中。比如，首先完成一個小型表單驗證的頁面，之後再加入其他的元件。

2. 探索更多元件

Angular Material 中的進階元件提供了強大的功能，能夠提升使用者體驗。這些元件包括 Dialog、 Card 、List 等。這些元件可以呈現更多的畫面。

Sidenav 與 Toolbar 的安裝與設定

首先，我們來建立一個簡單的 Sidenav 和 Toolbar。

在 app.module.ts 中，確保導入 MatSidenavModule 和 MatToolbarModule：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
  ],
  providers: [provideAnimationsAsync()],
  bootstrap: [AppComponent],
})
export class AppModule {}

接著，編輯 app.component.html，加入導 Sidenav 和 Toolbar ：

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>毛毛購物</span>
</mat-toolbar>

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">首頁</a>
      <a mat-list-item href="#">關於我們</a>
      <a mat-list-item href="#">聯絡我們</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <p>這是主要內容區域</p>
  </mat-sidenav-content>
</mat-sidenav-container>

編輯 app.component.css

/* 讓 Sidenav 和 Toolbar 高度自動調整 */
.example-container {
  height: 100vh;
}

/* 設定 Sidenav 的寬度 */
mat-sidenav {
  width: 220px;
}

/* 給內容加一點內距，讓看起來更整潔 */
mat-sidenav-content {
  padding: 16px;
}
  • Sidenav 提供了側邊菜單，通常用於提供網站的主要導航選項。
  • Toolbar 提供了簡單的應用頂部導航，並且可以在其中放置按鈕或標題。

https://ithelp.ithome.com.tw/upload/images/20240920/20168326mI25H3eNKO.png

3. 實踐表單與驗證

表單驗證是不可或缺的一部分，特別是在使用者資料輸入的情境中。我們將學習如何使用 Angular Material 提供的表單元件，並結合 同步 和 非同步驗證器 來實現資料驗證。

表單元件的使用

首先，我們來使用 Angular Material 的表單元件，如 輸入框（Input） 和 選擇器（Select），並設定簡單的表單。

在 app.module.ts 中導入 ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
  ],
})

接著，我們來建立一個表單：

<!-- login.component.html -->
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" placeholder="輸入你的 Email">
    <mat-error *ngIf="loginForm.controls['email'].hasError('required')">
      Email 是必填的
    </mat-error>
    <mat-error *ngIf="loginForm.controls['email'].hasError('email')">
      Email 格式不正確
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>密碼</mat-label>
    <input matInput type="password" formControlName="password" placeholder="輸入你的密碼">
    <mat-error *ngIf="loginForm.controls['password'].hasError('required')">
      密碼是必填的
    </mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="!loginForm.valid">
    登入
  </button>
</form>

我們將使用 Angular 的表單驗證功能：

// login.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('表單提交', this.loginForm.value);
    }
  }
}

這段程式碼中，我們對 Email 和 密碼 進行了基本的驗證。

https://ithelp.ithome.com.tw/upload/images/20240920/20168326RKdlNcX7uP.png

4. 建立一個完整的登入頁面

現在，我們可以把所學應用到一個小項目中。讓我們建立一個包含更多元件和表單驗證的登入頁面。

步驟 1：安裝必要的 Angular Material 模組

在專案根目錄下，執行以下命令來安裝 Angular Material：

ng add @angular/material

步驟 2：在 app.module.ts 中匯入必要的模組

確保在 app.module.ts 中匯入了所有需要的模組，例如 MatInputModule、MatFormFieldModule、MatButtonModule、ReactiveFormsModule 等。這些模組用來支援表單元件、按鈕及其他 Angular Material 組件。

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

步驟 3：建立 LoginComponent

執行以下命令來生成一個新的登入元件：

ng generate component login

步驟 4：設定登入頁面的 HTML

在 login.component.html 中，設定表單和表單欄位，並使用 Angular Material 的元件。

<!-- login.component.html -->
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" placeholder="輸入你的 Email">
    <mat-error *ngIf="loginForm.controls['email'].hasError('required')">
      Email 是必填的
    </mat-error>
    <mat-error *ngIf="loginForm.controls['email'].hasError('email')">
      Email 格式不正確
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>密碼</mat-label>
    <input matInput type="password" formControlName="password" placeholder="輸入你的密碼">
    <mat-error *ngIf="loginForm.controls['password'].hasError('required')">
      密碼是必填的
    </mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="!loginForm.valid">
    登入
  </button>
</form>

步驟 5：設定登入頁面的 TypeScript

在 login.component.ts 中，使用 FormBuilder 和 Validators 來設定表單驗證邏輯。

// login.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('表單提交', this.loginForm.value);
    }
  }
}

步驟 6：簡化的 CSS 設計

為了讓畫面保持簡潔，我們只需要一些基本的 CSS 設定來確保元件不會擠在一起。

/* login.component.css */

/* 將表單容器置中 */
form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 控制表單欄位的寬度 */
mat-form-field {
  width: 100%;
  margin-bottom: 16px;
}

/* 調整按鈕樣式，使其看起來更好 */
button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

步驟 7：在 app.component.html 中加入 LoginComponent

最後，在 app.component.html 中顯示登入元件。

<!-- app.component.html -->
<mat-toolbar color="primary">
  <span>我的應用</span>
</mat-toolbar>

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">首頁</a>
      <a mat-list-item href="#">關於我們</a>
      <a mat-list-item href="#">聯絡我們</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <app-login></app-login>
  </mat-sidenav-content>
</mat-sidenav-container>

步驟 8：執行

當你完成了這些步驟後，執行 ng serve 來啟動。可以到 http://localhost:4200/ 查看執行成果。

ng serve

https://ithelp.ithome.com.tw/upload/images/20240920/20168326ripWHttDqx.png

5. 掌握進階技能，從小處開始

掌握更多元件與表單驗證的過程可能會讓你感覺一開始有點困難。工程師的成長來自於不斷地挑戰自己，並一步步地解決問題。重要的是，從小處開始，不要急著把所有事情一口氣完成。

專注於實踐中學習，我們也是從小地方開始，慢慢的增加，現在也有一個登入畫面囉！


上一篇
Day11 利用 Angular Material 高效開發：不要再自己從零開始刻了
下一篇
Day13 掌握響應式佈局與 UI 框架整合：讓你的專案隨處適應
系列文
從零開始：全端新手的困境與成長 共 19 篇
  1. 15
    Day 15 前端畫面的美感：設計與優化
  2. 16
    Day16 增加前端美感的一些方式
  3. 17
    Day17 更多前端問題與優化方案
  4. 18
    Day18 掌控時程，開發更有節奏！破解工時焦慮
  5. 19
    Day 19 開始使用 Git 來管理 Side Project
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1047 組
團體組數
40 組
累計文章數
13158 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react 資訊安全
熱門問題
熱門回答
熱門文章
IT邦幫忙