Определить, какой FormControl в валидаторе FormArray вызвал изменение значения

Я могу легко проверить, удовлетворяет ли массив каким-либо правилам проверки. Проблемы возникали, когда я хотел взаимодействовать с определенными элементами управления в массиве форм.

У меня есть массив форм, который содержит группы форм. Каждая группа форм имеет несколько элементов управления формами.

Группа выглядит так:

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, тогда необходимо удалить ошибку в первой строке, потому что выполняется порядок возрастания.

ПРОБЛЕМА:

Я использую проверку на уровне массива форм. Моя проблема не в том, как реализовать алгоритм проверки того, является ли массив возрастающим и какие значения не находятся в порядке возрастания. Это самая легкая часть.

В рамках проверки массива форм я могу получить доступ ко всем элементам массива при изменении значений. На самом деле я не знаю, какой элемент управления был изменен в последний раз.

Как определить, какой элемент управления вызвал изменение значений в валидаторе массива форм?

Есть ли лучший способ сделать такую ​​проверку?


angular reactive-forms
person kat1330    schedule 25.01.2018    source источник
comment
Другим может быть полезно, если вы разделите этот вопрос на два отдельных вопроса (сейчас они немного широкие) и включите соответствующий код, включая html, о том, что вы пробовали, но не сработало.   -  person Z. Bagley    schedule 25.01.2018
comment
У сетки есть шаблон редактора? Сетка предоставляет переменную с областью действия индекса или можете ли вы использовать индекс директивы ngFor?   -  person Leonardo Neninger    schedule 25.01.2018
comment
@LeonardoNeninger Grid создается с помощью ngFor. Вопрос в том, как я могу определить элемент управления, изменяющий значение излучения?   -  person kat1330    schedule 25.01.2018
comment
@ Z.Bagley Спасибо. У вас есть рекомендация, как я могу разделиться? В общем, мой вопрос заключается в том, как определить, какой элемент управления изменяет значение изменения в валидаторе массива форм, и правильно ли это сделать?   -  person kat1330    schedule 25.01.2018
comment
Я бы поместил почти все, что говорит что-либо о сетке, в другой вопрос (и, возможно, удалил бы и снова спросил его, если приведенный ниже ответ не решит проблему). Кроме того, для ваших inputs вы можете добавить (change)="checkChange($event)", который даст вам $event.target и обнаружит отдельные изменения. Использование ViewChild - еще один вариант обнаружения изменений, но общая идея остается прежней. Надеюсь это поможет!   -  person Z. Bagley    schedule 26.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это еще один подход, который может вам помочь ... Я использую 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>

Обратите внимание на название группы форм, индекс редактируемой строки

Внутри части редактирования я показываю элемент ввода, у которого есть событие нажатия клавиши

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

Я надеюсь это тебе поможет.

person Leonardo Neninger    schedule 25.01.2018