title: Angular form change detection
body: <p>I am using Angular forms, and I would like to use their built-in change detection to implement a functionality in my application. When a user clicks a button, he should only see a dialog if he/she has made any changes in the form.</p>
  
  <p>I have changesMade variable:</p>
  
  <pre><code>private changesMade: boolean;
  </code></pre>
  
  <p>This is my TS code of the form:</p>
  
  <pre><code>this.carForm = new FormGroup({
          name: new FormControl('', [
              Validators.required,
              Validators.pattern('[a-zA-Z ]*'),
              Validators.minLength(1),
              Validators.maxLength(10)
          ])});
  </code></pre>
  
  <p>This is my HTML code of the form:</p>
  
  <pre><code>&lt;form [formGroup]="carForm"&gt;
          &lt;ion-item&gt;
            &lt;ion-label  stacked&gt;car name&lt;/ion-label&gt;
            &lt;ion-input type="text" [(ngModel)]="carname" formControlName="name"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my simulated(for now) service call where I subscribe to form changes after I've set the value of carname, which is bound to the input</p>
  
  <pre><code>setTimeout(()=&gt;{
    this.carname = "BMW";
    this.carForm.valueChanges.subscribe(val =&gt; {
    this.changesMade = true;
      });
  }, 44)
  </code></pre>
  
  <p>The problem here is that even though I haven't touched the form, this.changesMade gets set to true.</p>
  
  <p>NOTE: If I move the subscribe part of the code in the ngAfterViewInit, it still sets the changesMade to true even though I haven't toushed the input:</p>
  
  <pre><code>  ngOnInit(){
      //simulated server call
      setTimeout(()=&gt;{
        this.carname = "BMW";
  
      }, 44)
    }
        ngAfterViewInit(){
  this.carForm.valueChanges.subscribe(val =&gt; {
        this.changesMade = true;
          });
      }
  </code></pre>
  
  <p>I have created a <a href="https://stackblitz.com/edit/ionic-kc655w?file=pages%2Fhome%2Fhome.ts" rel="nofollow noreferrer"><strong>STACKBLITZ</strong></a> demonstrating the problem. How can I make it execute <code>this.changesMade = true;</code> only when I've actually physically touched the input in the UI?</p>