Angular 4、在表单数组（ReactiveFormsModule）中使用ngModel

Question

我在 angular 4 中尝试使用简单的数组形式，我遇到了 ngModel 的一个奇怪问题。

请先锁定我的代码。

我的方法

正在定义我的表单 FormGroup:
```
public invoiceForm: FormGroup;
```

设置我的测试数据和表单模型：

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;

在 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"
]

演示

请看Plunk Demo

Answer 1

所以基本上您希望 readonly local 变量保持不变？

你只需要改变这个：

public localModel = this.local;

对此：

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

这里发生了什么： 您的 localModel 获得与您的 local 变量相同的引用，然后影响它以对您的表单建模。因此，修改表单中的数据将修改引用，因此您的 local 变量值将改变。

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

N.B : 如果你使用数组，你会遇到同样的问题，因为数组引用是一样的。因此，您可能需要执行所谓的 Deep Copy 来创建数组的新引用，以及其中的值的副本。

Angular 4、在表单数组（ReactiveFormsModule）中使用ngModel

Angular 4, Use ngModel in Form Array (ReactiveFormsModule)

typescript

angular2-forms

angular-cli

angular

我的方法

问题

演示