Реактивные формы - при отправке, проверьте, есть ли хотя бы одно изменение в форме, и только после этого вызовите API

Question

То, чего я хочу достичь, выглядит примерно так:

1. Когда пользователь нажимает кнопку «Отправить», в фоновом режиме мне нужно сравнить, если состояние формы имеетизменено на состояние Я имею в виду, если есть хотя бы одно изменение в форме и только , затем вызовите API / Сервер для сохранения информации.
2. Если нетлюбые изменения, просто покажите пользователю предупреждение - «Эй, вам нужно что-то обновить!» (достаточно console.log ())
3. * Мне также нужно обработать этот случай, когда пользователь что-то меняет вполе1, например, от моркови до вкусной моркови, а затем снова обратно к морковке (не называйте API).

В данный момент у меня есть что-то вроде этого - пример кода

Можно ли это сделать, используя свойства нетронутые / грязные / нетронутые / нетронутые ?

Answer 1

Это возможно при использовании грязной проверки, RxFormBuilder предоставляет метод isDirty(), чтобы проверить, выполняются ли какие-либо обновления в ваших значениях formControl. Вам просто нужно импортировать FormGroupExtension и RxFormBuilder из пакета @ rxweb / реактивной формы-валидаторов, у вас естьсоздать группу форм через RxFormBuilder.Поскольку вы хотите проверить, нажмите ли на кнопку Отправить, не было ли сделано какое-либо обновление, вы можете попробовать использовать этот метод при нажатии кнопки отправки

 onSubmit() {
    let isDirty = (<FormGroupExtension>this.myForm1).isDirty();
    if(isDirty)
    {
       this.http.post(this.api, this.myForm1);
    }
    else{
      console.log("Hey you need to update something!");
    }
  }

Здесь разветвляется Stackblitz