Установка формы в нетронутый без очистки данных

Question

У меня есть форма, которая отображает список <input type="text"> элементов. Все они имеют общую кнопку сохранения, которая отключается до тех пор, пока форма не станет грязной. Затем, как только пользователь нажмет кнопку сохранения, данные будут отправлены на сервер. Если сервер успешно сохранил данные, я хочу сбросить форму до первозданного состояния, но я хочу сохранить все данные в форме, чтобы пользователь мог редактировать данные дальше, если они этого захотят.

После поиска, я нашел метод NgForm.reset(). Хотя это и установило форму в нетронутой, к сожалению, она также очищает форму. Кажется, что метод сброса имеет параметр значения, но я не могу понять, что он делает. Тем не менее, я не хочу, чтобы данные были очищены.

Я также пробовал myForm.pristine = true, но это почему-то вызывает перезагрузку страницы.

Here is a plunkr demonstrating the problem.

Answer 1

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

//@angular/forms/src/model.d.ts: 
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void; 

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

const { myForm: { value: formValueSnap } } = this; 

И сделать сам сброс:

this.myForm.reset(formValueSnap, false); 

Другой вариант со времен, когда не было никакой возможности ResE t, заключается в создании вспомогательного метода, который будет отмечать каждый элемент управления как pristine и будет хранить данные. Он может быть вызван в том же помощнике, что и в случае сброса.

private _markFormPristine(form: FormGroup | NgForm): void { 
    Object.keys(form.controls).forEach(control => { 
     form.controls[control].markAsPristine(); 
    }); 
} 

Ссылка на обновленный: plunkr.

Answer 2

То, что вы ищете, это myForm.markAsPristine().

Answer 3

Если вам случится быть с помощью шаблона-Driven формы и у вас есть что-то подобное в компоненте: @ViewChild('myForm') myform: any;

Я нашел, что markAsPristine() является функцией от формы собственности формы. Так было бы this.myform.form.markAsPristine().

Просто подумал, что добавлю это на случай, если другие натолкнутся на markAsPristine(), поскольку они не определены.

Answer 4

Я не нашел markAsPristine() в form собственности, но я нашел _pristine свойство, this.myForm['form']._pristine который может быть установлен в true.

@ViewChild('myForm') myForm: ElementRef; 
this.myForm['form']._pristine = true; 

Answer 5

Я думаю, что я решаю сделать это на мой метод:

form.controls['contato'].reset();