---
title: "雙向繫結回歸單向"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "雙向繫結的模板寫法，在Angular裡其實算是個一次性的語法糖，本質上就是一次性繫結資料，資料變動觸發事件回調並更新的操作，給全部封裝在了一起，那就是預設的香蕉盒子寫法。 而這個當然是可以自主控制的..."
source: "https://enriquemark.com/zh-hant/posts/%E9%9B%99%E5%90%91%E7%B6%81%E5%AE%9A%E5%9B%9E%E6%AD%B8%E5%96%AE%E5%90%91"
---

雙向繫結的模板寫法，在Angular裡其實算是個一次性的語法糖，本質上就是一次性繫結資料，資料變動觸發事件回調並更新的操作，給全部封裝在了一起，那就是預設的香蕉盒子寫法。

而這個當然是可以自主控制的。也就是説，我可以在需要的時候，手動回歸這種「繁瑣」的單向資料流機制，主動讓事件回調指向我自己的方法，以讓整個過程可以由我進行更高顆粒度的控制。

預設寫法有很明確的適用前提，即兩邊都是可以直接修改的物件，否則直接反向回去更新就會直接出錯。或者説我就是希望對回傳的資料進行一些自定義的預處理，那這種情況下就要主動控制了。

```HTML
  <input 
    type="text" 
    [ngModel]="promoCode" 
    (ngModelChange)="onPromoCodeChange($event)" 
    [ngModelOptions]="{ standalone: true }"
    placeholder="輸入任何英文字母"
  >
```

`\[ngModel]` 在這裡單獨出現意味著繫結，或者我個人理解為訂閲。

`(ngModelChange)` 當繫結的物件出現變動時，觸發這個回調，其 $event 會傳回變動後的值，而其型別和繫結時給入的型別一致。

`\[ngModelOptions]="{ standalone: true }"` 這裡是模板語法和響應式能夠混用還有效的關鍵。正常來説，任何響應式表單的子節點都必須指定自己的formControlName，如果沒有就會直接報錯。當前的模板寫法之下不可能掛上合法的響應式控件，自然需要額外宣告，因此這個也是必要的。