Более чистый способ сброса Angular формы

Question

Для примера, скажем, у меня есть форма, которая построена, как показано ниже.

buildForm() {
    this.myForm = this.formBuilder.group({
        myString = this.formBuilder.control('default'),
        myBool = this.formBuilder.control(true),
        nonDefaultString = this.formBuilder.control(null)
    });
}

Здесь пользователь взаимодействует и обновляет значения, так что они отличаются от значений по умолчанию. Когда пользователь сохраняет значения в базе данных, они направляются обратно на ту же страницу, и я хочу восстановить мои значения по умолчанию. Я не хочу вызывать функцию this.buildForm(), потому что тогда я теряю всех своих слушателей и все вокруг неуклюжий способ сброса. Я видел примеры использования this.myForm.reset(), но этот сбрасывает все значения в ноль , и у меня есть ненулевое ограничение для логических значений. Я понимаю, что могу сделать

this.form.reset({
    myString: 'default',
    myBool: true
});

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

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

Answer 1

Метод formGroup reset () принимает необязательный аргумент, который представляет собой значения формы для сброса. Таким образом, вы можете сохранить значения в переменной сразу после инициализации формы, например:

const defaultValues = myForm.value;

Затем, когда вы захотите вернуться к значениям по умолчанию, вы делаете: myForm.reset(defaultValues):

Answer 2

Вы можете использовать patchValue(), а также setValue()

this.form.patchValue({
    myString: 'default',
    myBool: true
},{emitEvent: false});

Событие Emit имеет значение false, поскольку при установке значений это вызовет другие события valueChanges, поэтому оно станет al oop так, чтобы избежать этого, emitEvent имеет значение false

Точно так же вы можете использовать setValue()

this.form.setValue({
    myString: 'default',
    myBool: true
},{emitEvent: false});

Попробуйте, что это может сработать ... Удачи .. !!