Angular 7-如何从表单中获取经过编辑的字段

Question

我创建了一个Form，其中有几个字段作为"输入类型文本"，文本框的值从后端填充。此表单是一个编辑页面，用户将在其中单独编辑所需字段。我正在使用提交类型按钮，其中enitre表单被提交到Angular组件。除此之外，我还需要跟踪在这个表单中编辑了哪些字段

下面是我创建的角度形式的代码。

<form [formGroup]="form" (ngSubmit)="edit()">
<div class="container-fluid">
    <div class="row">
      <div class="col-12 edit-branch-block"> 
<tr>
<td>Attribute_Name_1</td>
<td><input type="text" formControlName="Attribute_Name_1" disabled></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_2</td>
<td><input type="text" formControlName="Attribute_Name_2"></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_3</td>
<td><input type="text" formControlName="Attribute_Name_3"></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_4</td>
<td><input type="text" formControlName="Attribute_Name_4"></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_5</td>
<td><input type="text" formControlName="Attribute_Name_5"></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_6</td>
<td><input type="text" formControlName="Attribute_Name_6"></td>
</tr>
<tr></tr>
<tr>
<td>Attribute_Name_7</td>
<td><input type="text" formControlName="Attribute_Name_7"></td>
</tr>  
<tr></tr>
<button type="submit" style="margin-left: 10px; background-color:burlywood;"  class="edit-branch-button"> Edit </button>            
</div>
</div>
</div>
</form>

若用户只编辑了两个字段，我需要跟踪哪些字段被编辑。有人能帮我吗？

Answer 1

在提交表单之前，您想知道哪些字段已经更改。您可以在每个表单控件上使用.dirty，但这只会告诉您值是否在某个时刻被修改了。如果该值被更改然后被恢复，则CCD_ 2仍将返回CCD_。

不幸的是，并没有内置的方法来获取表单值已更改的列表。有充分的理由。表单结构可能非常复杂，表单值可能没有简单的相等性检查。

我将演示如何通过手动检查来处理此问题。也许你可以以此为起点，并根据自己的需求进行调整。

我的方法

与Angular组件中的所有内容一样，所有内容都应该来自您的模型。只要我们有模型的副本，我们就可以与之进行比较

一旦你有了模型，你就可以使用它的值来构建你的表单。

提交表单后，您可以对照原始模型检查已发布表单的值，以检查差异。然后你如何利用这些差异取决于你自己。

给定以下模型：

model = {
first: 'first',
second: 'second'
};

我将构建以下表单：

this.form = this.formBuilder.group({
first: this.formBuilder.control(this.model.first),
second: this.formBuilder.control(this.model.second)
});

提交表单时，我可以将当前表单值与模型进行比较：

const dirtyFields = {
first: this.form.value.first !== this.model.first,
second: this.form.value.second !== this.model.second
};

这可能需要付出很多努力才能变得通用，但了解它是如何手动工作的是一个很好的起点。

如果您不关心某个值已更改然后又被恢复，那么您可以始终只检查表单控件上的dirty标志。不过，这仍然是一个手动检查，所以您还可以检查值本身。

演示：https://stackblitz.com/edit/angular-sb7r1k