0

我可以轻松验证数组是否完全满足某些验证规则。当我想与表单数组中的特定控件进行交互时，问题就出现了。

我有包含表单组的表单数组。每个表单组都有几个表单控件。

组如下所示：

const rowGroup = new FormGroup({
    'range': new FormControl(row.range, [Validators.required, CustomValidators.range([1, 10000])]),
    'multifamily': new FormControl(row.multifamily, [Validators.required, Validators.min(0), CustomValidators.range([0, 10000])]),
    'office': new FormControl(row.office, [Validators.required, Validators.min(0), CustomValidators.range([0, 10000])]),
    'retail': new FormControl(row.retail, [Validators.required, Validators.min(0), CustomValidators.range([0, 10000])]),
    'other': new FormControl(row.other, [Validators.required, Validators.min(0), CustomValidators.range([0, 10000])])
});

表单数组包含ascendingValidation进行验证的组和函数。组是动态添加的，并且不受限制。

const array = new FormArray([rowGroup], ascendingValidation);

在页面结果将是网格： 在此处输入图像描述

表单需要在“LTV 范围顶部 (%)”列上执行升序验证。

示例（我总是在谈论“LTV 范围顶部 (%)”列）：

  1. 第一种情况：如果用户将第一行中的值更改为 44 而不是 41，则此字段（表单控件）将无效，因为用户破坏了升序。我只想在第一行显示错误消息，因为用户更改了该值。
  2. 第二种情况：如果用户更改第二行并添加 40 而不是 43，则该字段需要无效。我只想在第二行字段错误消息上显示。
  3. 第三种情况：如果用户用户在第一行添加 45 而不是 41，则需要在该字段上显示错误消息。如果用户在第二行添加 46 而不是 43，则需要在第一行删除错误，因为满足升序。

问题：

我正在使用表单数组级别验证。我的问题不是如何实现算法来检查数组升序以及哪些值不是升序。这是最简单的部分。

在表单数组验证中，当值发生更改时，我可以访问所有数组元素。实际上我不知道哪个控件是最新更改的。

如何检测哪个控件导致表单数组验证器中的值变化？

有没有更好的方法来进行这种验证？

4

1 回答 1

0

这是另一种可以帮助您的方法...我使用 ngx-datatable，它为列模板提供了完整的 api。下面的逻辑跟踪上次更改的控件名称和行索引。

我的表定义是

<ngx-datatable id="tblMain" #tblMain formGroupName="details" class="material" *ngIf="!hideTable"
                       [rows]="items"
                       [headerHeight]="50"
                       [footerHeight]="50"
                       [rowHeight]="'auto'"
                       [columnMode]="'force'"
                       [trackByProp]="'id'"
                       [rowClass]="getRowClass"
                       >

注意 formGroupName="details" 这是一个嵌套的 FormArray

我的专栏模板是这样的。

<ng-template let-row="row" let-rowIndex="rowIndex" let-value="value" ngx-datatable-cell-template>...</ng-template>

在模板内部，我可以控制部分显示视图或编辑部分..

<!--View-->
<div *ngIf="row != currentEditingDetail">...</div>

<!--Edit-->
<div *ngIf="row == currentEditingDetail" [formGroupName]="rowIndex">...</div>

注意表单组名，正在编辑的行的索引

在编辑部分中，我显示了一个具有 keydown 事件的输入元素

<input type="hidden" formControlName="productValue"  [(ngModel)]="row.productId" (keydown)="processInputKeyDown($event, rowIndex, 'product')"/>

注意：您可以使用 processInputKeyDown 来跟踪最后更改的元素。

  Component({})
  export class ComponentComponent
{
  ...
  processInputKeyDown = (event, index, control) =>{this.lastGroup = i; this.lastControl = control}
  ...
}

我希望这可以帮助你。

于 2018-01-25T21:51:25.760 回答