title: Angular forms dirty when same as initial state
body: <p>I'm using angular to create a simple input form as below. </p>
  
  <p>I'm wondering if anyone knows of a way for me to track, what I would call, "true" state of dirty or not if a user changes a controls value then reverts back to original.</p>
  
  <p>So on loading my "name" property = "John".</p>
  
  <p>Then user deletes a character to make name property "Jon"
  now my contactForm is dirty.</p>
  
  <p>If user places cursor back and types "h" again name = "John" my contactForm is still dirty even though is in original state?</p>
  
  <pre><code>import { FormControl } from '@angular/forms';
  import { FormBuilder, AbstractControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
  import { ContactDetail } from './../../../models/contact-details.model';
  import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'contact-edit-edit-body',
    templateUrl: './contact-edit-edit-body.component.html',
    styleUrls: ['./contact-edit-edit-body.component.css']
  })
  export class ContactEditEditBodyComponent implements OnInit {
    @Input() contact: ContactDetail = new ContactDetail(0);
  
    contactForm: FormGroup;
    name: AbstractControl;
    phoneNumber: AbstractControl;
    emailAddress: AbstractControl;
  
    constructor(fb: FormBuilder) {
      this.contactForm = fb.group({
        "name": [this.contact.name],
        "phoneNumber": [this.contact.phoneNumber],
        "emailAddress": [this.contact.emailAddress]
      });
  
      this.name = this.contactForm.controls['name'];
      this.phoneNumber = this.contactForm.controls['phoneNumber'];
      this.emailAddress = this.contactForm.controls['emailAddress'];
    }
  
    ngOnInit() {
  
    }
  }
  </code></pre>