Angular 7 реактивная форма, как сбросить форму и получить ее начальные значения вместо сброса их на пустые значения

Question

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

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

В настоящее время я пытался:

this.formGroup.reset();
//Or
this.formGroup.markAsPristine;
//Or
this.formGroup.markAsTouched

.reset() полностью сбрасывает форму.

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

Answer 1

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

Метод 1: Передача значений в метод сброса.

reset() {
  this.formGroup.reset({family_relation: 1});
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
}

Метод 2: Установочные значения

reset() {
  this.formGroup.reset();
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
  // this.formGroup.get('family_relation').setValue(1)
}

Answer 2

Пожалуйста, найдите здесь stackbliz

https://stackblitz.com/edit/angular-material-ciztu9

Angular Обеспечивает сброс (formState: any = null), вы можете передать начальный formState / object в качестве первого параметра

Для получения дополнительной информации https://angular.io/api/forms/FormControl#reset

Answer 3

Создайте метод setForm(), который будет вызываться в конструкторе, и reset()

setForm() {
  this.formGroup = this.fb.group({
    'family_relation': new FormControl(this.familyRelationArray[0]['family_relation_id'])
  });
}

(Удалите код из конструктора, который устанавливает начальные значения)

resetForm() теперь выглядит так:

reset() {
    this.formGroup.reset();
    //Or
    this.formGroup.markAsPristine;
    //Or
    this.formGroup.markAsTouched

    this.setForm();
  }

И конструктор:

constructor(private fb: FormBuilder) {

    this.familyRelationArray = [
      {
        family_relation_id: 1,
        family_relation_type: 'Parent'
      },
      {
        family_relation_id: 2,
        family_relation_type: 'Sister'
      }
    ];
    this.setForm();

  }