Как проверить, что значение в форме было изменено с исходного

Question

У меня есть реактивная форма в приложении Angular 7:

  this.userInfoForm = this.formBuilder.group({
      displayName: [this.user.displayName, [
        Validators.required,
      ]],
    })

Как проверить, было ли изменено начальное значение на входе? Потому что когда я использую userInfoForm.dirty, он возвращает true, даже если я удаляю 1 символ из значения, а затем добавляю его обратно.

Answer 1

Я хотел бы сделать так, будет использовать valueChanges() метод FormControl, который возвращает Observable, который испускает последние значения. Поэтому вы можете подписаться на valueChanges для обновления переменных экземпляра или выполнения операций.

intialValue: any; // Define one property to store the initial value of the control

this.intialValue = this.userInfoForm.get('displayName').value; // Store initial value

// and then subscribe to valueChanges method of FormControl to get the latest value
this.userInfoForm.get('displayName').valueChanges.subscribe(value => {
  console.log('Intital Value', this.intialValue)
  console.log('New Value', value);
})

Working Demo

Answer 2

Один из способов сделать это - получить значение формы, form.value после ее создания, и сохранить его, используя что-то вроде - this.initialFormValue = JSON.stringify(this.form.value)

Всякий раз, когда вы хотите проверить, еслиформа была изменена, например, при отправке, получить текущее значение, JSON.stringify(this.form.value) и сравнить с this.initialFormValue

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

Я не проверял это, но теоретически это должно работать !!