Как проверить изменение состояния в угловом 4/6?

Поскольку вы используете реактивную форму, вы можете использовать valueChanges в FormGroup.

Поскольку он имеет тип Observable, вы можете указать ему subscribe, чтобы установить переменную типа boolean, которая будет использоваться в шаблоне для включения кнопки.

...

@Component({...})
export class AppComponent  {
  form: FormGroup;
  disableButton = true;

  ngOnInit() {
    ...

    this.form.valueChanges.subscribe(changes => this.disableButton = false);

  }
}

И в вашем шаблоне:

<form [formGroup] = "form">
  ...
  <button [disabled] = "disableButton">Submit</button>
</form>

ОБНОВИТЬ:

Если вы хотите отключить его, когда значения на самом деле не меняются, проверьте текущее значение формы с предыдущим значением:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: FormGroup;
  disableButton = true;

  userValue = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]' 
  }

  ngOnInit() {
    this.form = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      email: new FormControl()
    });
    this.form.patchValue(this.userValue);
    this.form.valueChanges.subscribe(changes => this.wasFormChanged(changes));
  }

  private wasFormChanged(currentValue) {
    const fields = ['firstName', 'lastName', 'email'];

    for(let i = 0; i < fields.length; i++) {
      const fieldName = fields[i];
      if (this.userValue[fieldName] !== currentValue[fieldName]) {
        console.info('Came inside');
        this.disableButton = false;
        return;
      }
    }
    this.disableButton = true;
  }

}

ЗАМЕТКА: StackBlitz обновляется соответствующим образом.

Here's a Working Sample StackBlitz for your ref.

Это называется Dirty Check.

Вы можете найти этот SO-ответ очень полезным: https://stackoverflow.com/a/50387044/1331040

Вот руководство для Template-Driven Formshttps://angular.io/guide/forms

Вот руководство для Reactive Formshttps://angular.io/guide/reactive-forms

И вот в чем разница между двумя концепциями https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Надеюсь на эту помощь.

Я бы сделал что-то вроде этого:

  form: FormGroup;
  disableButton = true;
  originalObj: any;

  ngOnInit() {
    this.form = new FormGroup({
      control: new FormControl('Value')
    });

    this.originalObj = this.form.controls['control'].value; // store the original value in one variable

    this.form.valueChanges.subscribe(changes => {
      if (this.originalObj == changes.control)  // this if added for check the same value
      {
        this.disableButton = true;
      }
      else {
        this.disableButton = false;
      }
    }
    );
}

WORKING EXAMPLE