viewModel 被其他 ngModel 更改

General
1

需求：

  • 點擊 + 新增日期輸入框
  • 點擊 - 刪除輸入框
  • 當 effectiveDates 的日期皆有值時才允許下一步

sample code：

操作步驟：

  1. 按2次按鈕 .btn-add 建立兩個日期輸入框
  2. 更改第二個日期輸入框
  3. 第三個日期輸入框的日期被更改了
    (但是從 Angury 觀察，發現僅更改了 viewModel，ngModel 仍維持 null)

想請教各位先進

  1. 第三個日期輸入框的 viewModel 是因為什麼樣的 binding 機制才被更改的?
  2. 我透過 [ngModel] 讀取 component 的 Date，透過 (ngModelChange) 將改變值回寫這樣式正確的操作方式嗎?
  3. 是否會建議統一 effectiveDates 內存放的型態?
    component 原本放 Date 物件，但是 input 回傳的卻是 string

謝謝各位～

2

在 ngFor 的地方加上 trackBy，就可以排除那個問題

  1. 這樣的操作方式是可以的, 有些情境的確需要這樣子處理
  2. Input[type=date] 的值是文字型，統一型態會比較好，回傳到後端時，再做資料型態轉換就可以了
1個讚
3

感謝凱大指點 :sob:

翻閱 https://angular.io/guide/structural-directives#microsyntax 及 ngFor 的 API https://angular.io/api/common/NgForOf#change-propagation 才發現官網已經有講得很詳細了…Orz