Angular Реактивные изменения формы при открытии формы в режиме редактирования

Question

Я открываю форму angular в режиме редактирования с предварительно заполненными данными, скажем, черновую версию. У меня есть требование, чтобы я хотел включить кнопку сохранения, только если форма была изменена пользователем.

Я пытался использовать

ngOnInit() {
 this.customerForm.valueChanges.subscribe({
      next:(value)=>{
        console.log('Value changed');
        this.enableSaveButton = true;
 }
}

Однако проблема в том, что это вызывается несколько раз, когда данные формы страницы предварительно заполняются моделью.

Пример кода: Моя форма предварительно заполняется моделью во время инициализации, если модель содержит некоторые данные.

this.customerForm = new FormGroup({
      firstName: new FormControl( this.user.firstName , [Validators.required])
    })

Answer 1

<button [disabled]="enableSaveButton">Save</button>

Если вы предварительно заполнили форму, используя setValue или patchValue, то emitEvent: false должно быть передано, чтобы не распознаваться как измененный.

this.customerForm.setValue(value, { emitEvent: false });

Answer 2

Попробуйте добавить это на кнопку «Сохранить». Свойства 'pristine' и 'dirty' в customerForm сообщат вам, было ли изменено какое-либо поле в форме.

<button [disabled]="customerForm.pristine">Save</button>

OR

<button [disabled]="!customerForm.dirty">Save</button>