Angular 4，在表單數組中使用ngModel（ReactiveFormsModule）

Question

我正在嘗試在angular 4中使用簡單的數組形式，並且我遇到了ngModel的一個奇怪問題。

請首先鎖定我的密碼。

我的方法

1. 定義我的表單FormGroup：

   public invoiceForm: FormGroup; 
   

2. 設置我的測試數據和表單型號：

   readonly local = [ 
   'Lorem ipsum dolor sit amet', 
   'et iusto odio dignissim qui blandit', 
   'Epsum factorial non deposit', 
   'Ma quande lingues coalesce' 
   ]; 
   public localModel = this.local; 
   

3. 定義表單組在ngOnInit和簡單的添加我的本地人排入表格組：

   this.invoiceForm = this._fb.group({ 
       itemRows: this._fb.array([this.initItemRows()]) 
   }); 
   
   
   for (let index in this.local) 
       this.setAndReplaceNewERow(+index) 
   

現在，一切看起來都正確。 see result as image

的問題

當我改變的文本輸入中的一個，主要變量也將改變。

變更前：

FormGroup 
{ 
    "itemRows": [ 
    { 
     "itemname": "Lorem ipsum dolor sit amet" 
    }, 
    { 
     "itemname": "et iusto odio dignissim qui blandit" 
    }, 
    { 
     "itemname": "Epsum factorial non deposit" 
    }, 
    { 
     "itemname": "Ma quande lingues coalesce" 
    } 
    ] 
} 

My Local Data 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "Epsum factorial non deposit", 
    "Ma quande lingues coalesce" 
] 

My Form Model 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "Epsum factorial non deposit", 
    "Ma quande lingues coalesce" 
] 

變更後：

FormGroup 
{ 
    "itemRows": [ 
    { 
     "itemname": "Lorem ipsum dolor sit amet" 
    }, 
    { 
     "itemname": "et iusto odio dignissim qui blandit" 
    }, 
    { 
     "itemname": "changed !!!!!!!!!!!" 
    }, 
    { 
     "itemname": "Ma quande lingues coalesce" 
    } 
    ] 
} 
My Local Data 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "changed !!!!!!!!!!!", 
    "Ma quande lingues coalesce" 
] 
My Form Model 
[ 
    "Lorem ipsum dolor sit amet", 
    "et iusto odio dignissim qui blandit", 
    "changed !!!!!!!!!!!", 
    "Ma quande lingues coalesce" 
] 

DEMO

請看看Plunk Demo

Answer 1

所以基本上你想你的readonly local變量保持不變？

你只需要更改此設置：

public localModel = this.local; 

這樣：

public localModel = Object.assign({}, this.local); 

---

這裏發生了什麼：您localModel得到相同的參考爲您local變量，然後影響這個建模到你的表單。因此，修改表格中的數據將修改參考值，因此您的變量值將會改變。

我使用Object.assign()方法創建一個具有相同值的新引用。基本上，這是一個副本。

N.B：如果使用數組，則會出現相同的問題，因爲數組引用將相同。因此，您可能需要執行稱爲深層副本的創建數組的新引用以及其中的值的副本。