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

Question

Я создаю службу в угловом 2, которая позволяет пользователю редактировать несколько форм на странице, а затем сохранять все изменения сразу. У меня возникла проблема с попыткой добавить функциональность для сброса форм, если пользователь решает не сохранять свои изменения.

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

<input class="form-control" [ngModel]="model" (ngModelChange)="change($event)"/> 

В принципе, когда пользователь вносит изменения в любой из форм, я вручную захватить изменения с ngModelChange и кэшировать его в моей службе. Это позволяет модели оставаться неизменной до тех пор, пока пользователь не сохранит и ответ HTTP не будет возвращен с обновленной моделью. Поэтому я могу сохранить старые значения, если пользователь хочет сбросить все, а также успешно отслеживать изменения в сервисе. Моя проблема заключается в том, что из-за характера привязки данных в одном направлении я не могу получить формы для повторной передачи, потому что модель никогда не менялась в первую очередь. Итак, есть ли способ вручную инициировать повтор входных данных формы, чтобы вернуть их к значению модели?

Answer 1

Вы должны быть в состоянии установить значения формы обратно в неизмененную модель через FormGroupreset api. Я предполагаю, что ваш вход является частью более крупной формы, используя ngForm.

Большинство примеров, которые я видел, используют сброс, чтобы очистить форму, то есть сброс значения и флаги toucheddirty.

Но reset также позволяет вам предоставить карту требуемых значений управления, которые вы получите от значений в вашей модели.

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

Answer 2

Я согласен с приведенным выше ответом. Вы можете иметь этот вид кода, чтобы взять «снимок» ваш FormGroup перед редактированием:

... 
private snapshot: any; 
private formGroup: FormGroup; 

private takeSnapshot() { 
    this.snapshot = {}; 
    for (let id in this.formGroup.controls) { 
     this.snapshot[id] = this.formGroup.controls[id].value; 
    } 
} 
... 
// before editing, call this.takeSnapshot() 

... тогда, когда вы хотите вернуться, вы передаете снимок методы сброса() в formgroup :

this.formGroup.reset(this.snapshot)