Angular 6 ngModel reset

[CrazyBite]

Здравствуйте! Подскажите как правильно сбросить value в input на изначальный.
У меня таблица, с ngFor, там лежит такой элемент:

<input type="text" [(ngModel)]="rowData[col.field]"  (keypress)="setValue($event)">

в setValue я проверяю значение на валидность.. оно может быть неверное и тогда мне надо вернуть значение input на изначальное.
Думал еще прикрутить (ngModelChange), для моей задачи это вроде как тоже самое.
Подскажите как действовать?

[destus]

CrazyBite,
Просто не используйте 2way data binding. То есть

<input type="text" [ngModel]="rowData[col.field]"  (keypress)="setValue($event)">

Ну и в setValue если event.target.value не валидно - сбрасывайте его на rowData[col.field], а если валидно - меняйте значение rowData[col.field] на него.

[CrazyBite]

<input type="text" [ngModel]="rowData[col.field]"  (keypress)="setValue($event)">

Дело в том что rowData это переменная в темплейте:
<ng-template pTemplate="body" let-rowData let-columns="columns">
я не знаю как к ней из фунцкии обратится...

[destus]

CrazyBite,
Ну тогда можно модернизировать функцию setValue.

<input type="text" [ngModel]="rowData[col.field]"  (keypress)="setValue($event, rowData[col.field])">

Передавать объект события и значение на которое нужно скинуть event.target в случае не валидности нового.

[CrazyBite]

<input type="text" [ngModel]="rowData[col.field]"  (keypress)="setValue($event, rowData[col.field])">

Спасибо за ответ! Я так и сделаю.
А не подскажите аналогичного алгоритма, только с [(ngModel)] нет?

[destus]

CrazyBite,
Можно при событии focus запоминать значение rowData[col.field], а при keypress, если новый value не валиден - сбрасывать на это запомненное значение.

[CrazyBite]

CrazyBite,
Можно при событии focus запоминать значение rowData[col.field], а при keypress, если новый value не валиден - сбрасывать на это запомненное значение.

Как запомнить изначальное значение у [(ngModel)] ? Оно (запомненное значение) же вроде будет изменяться в соответствии со значением ngModel, нет?

[destus]

CrazyBite,

<input type="text" [(ngModel)]="rowData[col.field]"  (keypress)="setValue($event)" (focus)="previousValue=rowData[col.field]">

[CrazyBite]

destus,
получается previousValue это глобальная, и она будет меняться в зависимости от того на кого ты фокусишься.
Если мы допустим поменяем значение и не засабмитим его, при этом сменим фокус на другой инпут, мы потеряем previousValue прошлого инпута.

Смотрите у меня такая вот бредятина получается:

<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [style.background-color]="(rowData.hasOwnProperty('color')) ? rowData['color'] : 'white'">
      <td *ngFor="let col of databaseStructure.columns">
        <span *ngIf="!editable">{{rowData[col.field]}}</span>
        <input type="text"
               [(ngModel)]="rowData[col.field]"
               *ngIf="editable"
               class="editInput"
               (keypress)="setValue($event,rowData['id'],col.field,rowData[col.field])"
               (focus)="previousValue=rowData[col.field]"
        >
      </td>
    </tr>
  </ng-template>

Ели editable, то я показываю инпуты. В них инфа если меняется и сабмитится то я проверяю ее на сервере и в зависимости от валидности или применяю ее на клиентской части или возвращаю на предыдущее значение. Так же если мы не поменяли и не засабмитили то тоже надо вернуть на предыдущее значение.

[destus]

CrazyBite,
Ну тогда можно создать переменную типа Map, где в качестве ключей хранить ссылки на инпуты, а в качестве значений - начальные данные. При фокусе делать map.set(), если нет такого инупта в наборе (map.has), а при сабмите в цикле восстанавливать значения для не валидных данных. Короче говоря, решений может быть несколько...если был бы еще запускаемый пример всего этого...