Angular 6 ngModel reset
 

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

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

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

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

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

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

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

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

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

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

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

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

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

CrazyBite,

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

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

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