title: How to check for changes in form in Angular 2 using
body: <p>I have a form with few data fields and two buttons.I want to enable the buttons only if the user makes some changes to the form. I have tried using:</p>
  
  <pre><code>this.form.valueChanges.subscribe(data =&gt; console.log('form changes', data));
  </code></pre>
  
  <p>But the changes are detected initially when the form loads also. Is there any other way to check for any changes in the form. I want it to be called only when user makes changes to the field and not when the form loads. Following is my html and typescript code:</p>
  
  <blockquote>
    <p>profile.html:</p>
  </blockquote>
  
  <pre><code>&lt;section&gt;
      &lt;div&gt;
          &lt;form [formGroup]="form"&gt;
              &lt;fieldset&gt;
                  &lt;div class="panel-group m-l-1 m-r-1 accordion vertical-scroll" id=""&gt;
                      &lt;div class="form-group required no-gutter"&gt;
                          &lt;label for="firstname"&gt; First Name:&lt;/label&gt;
                          &lt;div class="col-md-7 col-lg-6"&gt;
                              &lt;input type="text" class="form-control" id="firstname" placeholder="" name="firstname" title="firstname" formControlName="firstname" size="128" aria-required="true" maxlength="35"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/fieldset&gt;
              &lt;div&gt;
                  &lt;button class="btn btn-primary" type="button" (click)="save()"&gt;Save&lt;/button&gt;
                  &lt;button class="btn btn-primary" type="button" (click)="cancel()"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <blockquote>
    <p>profile.component.ts:</p>
  </blockquote>
  
  <pre><code>export class ProfileComponent implements OnInit, AfterViewInit, OnChanges {
      public form: FormGroup;
  
      constructor(private formBuilder: FormBuilder, private app: Application) {
  
      }
  
      loadForm(): void {
          this.form = this.formBuilder.group({
              firstname: [this.app.firstName, Validators.required]
          });
          this.form.valueChanges.subscribe(data =&gt; console.log('form changes', data));
  
      }
  
      save(): void {
  
      }
  
      cancel(): void {
  
      };
  
      ngOnInit() {
          this.loadForm();
      }
  
      ngAfterViewInit() {
          this.loadForm();
      }
  }
  </code></pre>