Установите форму в нетронутую, не очищая данные

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

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

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

Вот демон, демонстрирующий проблему.

Ответы

Ответ 1

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

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

В обработчике отправки мы запишем копию последнего состояния:

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

И сделайте сам reset:

this.myForm.reset(formValueSnap, false);

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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