您如何标记 ngFor 循环中的哪些对象是 'dirty'？

Question

我有以下代码可以将对象列表放到页面上：

    <tr *ngFor="let setting of settings; let i = index;">
            <td>{{setting.section}}</td>
            <td>{{getTenantName(setting.tenant)}}</td>
            <td>{{setting.name}}</td>
            <td *ngIf="!setting.restWritable">
              <span>{{setting.value}}</span>
            </td>
        <td *ngIf="setting.restWritable && !setting.secret">
          <input class="form-control" [name]="'Value' + i" [(ngModel)]="setting.value" />
        </td>
      </tr>

而且我有一个要求，只有 DIRTY/编辑/更改的对象被发送回服务器..（也就是输入已被用户更改）

我也知道我可以使用表单来查明单个输入是否有问题，但我希望有一种方法可以在 OBJECT 级别执行此操作。所以换句话说，如果该对象中的任何字段是脏的，则整个对象都是脏的，应该返回给服务器。

Answer 1

您可以使用@ViewChild 来访问组件中的表单对象，或者更好的解决方案是使用反应式表单，您可以在其中访问整个表单。并且您需要使表单控件名称不同才能在表单对象中具有不同的控件

html:

模板：

@ViewChild('someForm') myForm: NgForm 现在您可以访问 myForm.dirty

作为一个小例子，我分叉了 angular 模板驱动的表单： https://stackblitz.com/edit/angular-fu35pz-vlr7bm?file=src%2Fapp%2Fhero-form%2Fhero-form.component.html

Answer 2

如果您通过 ngFor 指令生成表单控件，则您使用的是模板驱动表单。

将 #form="ngForm" 添加到您的 form 标签。然后通过 @ViewChild() form: NgForm 您可以获得对您的表格的引用。然后您可以列出所有字段并按特定属性过滤它们。

唯一的技巧是您必须为模板中的每个控件生成唯一的 ID 和名称。

您如何标记 ngFor 循环中的哪些对象是 'dirty'？

How can you flag which OBJECTS in an ngFor loop are 'dirty'?

angular2-forms

angular