叡揚資訊

GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

4 分鐘閱讀時間 (759 個字)

字體大小: + –

Angular # 7 - 初見 Angular Forms

程式語言前端

2021/07/01, 週四

966 點擊

0 評論

所以說那個醬汁呢？
- 前面已經做好了股票資訊的呈現，但只有五支，如果要動態新增或刪除自己目前關注的股票，很顯然既有的功能是達不到的
  - 這篇要透過 Angular Forms 以互動的方式增減關注的股票
  - Form 就 Form，為何是 Angular Forms？自然是因為 Angular 內建有支援很多方便的功能像是 validation, two-way binding, one-way binding, ...等等，日後會再詳談
  - 既然是管理關注股票，跟顯示用的 Dashboard 沒什麼關係，建一個新的 Component 來處理吧！
```
  ng generate component components/manage
```
  - 再來又要對 AppComponent 的 html 作手腳了
```
  <main class="mdl-layout__content" style="padding: 20px;">
      <manage></manage>
  </main>
```
    - 其實只是從 DashboardComponent 切換成 ManageComponent
    - 那 Dashboard 怎麼辦？別急，我們下一篇會再談
  - 接著，因為要用到 Angular Forms，我們要在 app.module.ts 加上下以的 import:
```
  import { FormsModule } from '@angular/forms';

  //...(略)
  imports: [
      BrowserModule,
      HttpClientModule,
      FormsModule,
  ],
```
    - 先是從 @angular/forms 引用 FormsModule
    - 接著再在 NgModule 的部份註冊它
  - 再來就是要把 ManageComponent 的邏輯填上了:
```
  import { Component, OnInit } from '@angular/core';
  import { StocksService } from 'src/app/services/stocks.service';

  @Component({
    selector: 'manage',
    templateUrl: './manage.component.html',
    styleUrls: ['./manage.component.css']
  })
  export class ManageComponent implements OnInit {

    symbols: Array<string>;
    stock: string;

    constructor(private stockService: StocksService) {
      this.symbols = this.stockService.get();
    }

    add() {
      this.symbols = this.stockService.add(this.stock.toUpperCase());
      this.stock = '';
    }

    remove(symbol) {
      this.symbols = this.stockService.remove(symbol);
    }

    ngOnInit(): void {
    }
  }
```
    - 大致上就是針對 symbols 這個陣列的維護，其他的前面幾篇都提過了
  - Controller 搞定，來設計 View！
```
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col"></div>
    <div class="mdl-cell mdl-cell--4-col">
      <form style="margin-bottom: 5px" (submit)="add()">
        <input
          name="stock"
          [(ngModel)]="stock"
          class="mdl-textfield__input"
          type="text"
          placeholder="Add Stock"
        />
      </form>
      <table
        class="mdl-data-table mdl-data-table--selectable mdl-shadow--2dp"
        style="width: 100%"
      >
        <tbody>
          <tr *ngFor="let symbol of symbols">
            <td class="mdl-data-table__cell--non-numeric">{{ symbol }}</td>
            <td style="padding-top: 6px">
              <button class="mdl-button" (click)="remove(symbol)">Remove</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mdl-cell mdl-cell--4-col"></div>
  </div>
```
    - 這是一個 form，但 form 這個標籤有一個屬性是這麼寫的 (submit)="add()"，這是什麼意思？
      - 左邊的 submit 指的是事件名稱，記得要用括號包住
      - 右邊的 add 是事件處理的方法，也就是我們前面定義在 controller 裡的方法
      - 一併看就是按了按鈕會去呼叫 add 這個方法
    - 這個 form 只有一個 input，它的 name 是 stock
      - 別看漏了，後面還有一個 [(ngModel)]="stock"
      - 這是一個雙向綁定，也就是說使用者在前端 UI 操作讓這個 input 的值異動，Controller 的 stock 成員變數的值也會跟著異動，反之亦然
    - 再來就是透過 NgFor 這個 Directive 產 table
      - 想特別提一下 Directive 在定義時是大寫開頭，在使用的時候是小寫開頭
      - 承上，會改變內容的會用 *(星號) 開頭，會改變結構的則不用
小結一下
- 這篇主要第一次用到 Angular Form
  - two-way binding 的 NgModel，要特別留意它的使用方式
  - 事件綁定以及事件處理除了多了個括號跟是使用 Angular 所定義的 event 之外大多無太大的差異
    - 雖然說是 Angular 定義的 event，但大多數 HTML 既有的 event 都有支援，詳細可以參考[連結1][連結2]
    - 除了 HTML 既有的 event 之外，Angular 也可以自行定義 event，這個往後會再說明