Question

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

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

小组看起来像这样：

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范围顶部（％）＆＃39;进行升序验证。柱。

示例（我说的是＆＃39; LTV范围的顶部（％）＆＃39;列总是）：

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

问题：

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

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

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

有没有更好的方法来进行此类验证？

Answer 1

这是另一种可以帮助你的方法...... 我使用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 =＆＃34;详情＆＃34;这是一个嵌套的FormArray

我的专栏模板就是这个。

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

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

<!--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}
  ...
}

我希望这可以帮到你。

检测FormArray验证器中的哪个FormControl导致值更改

1 个答案: