title: Angular2: how do display character count on reactive form input
body: <p>I'm using Angular2 reactive forms, and I want to display a character count of a <code>textarea</code> as the user types.</p>
  
  <p>I was hoping to just be able to include the form control's <code>name.length</code> in my html like so:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label for="incidentDescription"&gt;Brief Description of Incident&lt;/label&gt;
    &lt;textarea id="incidentDescription" formControlName="incidentDescription" required [attr.maxLength]="maxIncidentDescriptionLength"&gt;&lt;/textarea&gt;
    &lt;small&gt;&lt;code&gt;{{alaynaPage.incidentDescription.length}}&lt;/code&gt; of &lt;code&gt;{{maxIncidentDescriptionLength}}&lt;/code&gt; characters&lt;/small&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This "works" however the <code>length</code> of the form control lags one keystroke behind. So for example if I type <code>a</code> into the textarea <code>{{alaynaPage.incidentDescription.length}}</code> is 0.  If i then type <code>b</code> (so string is <code>ab</code>) <code>{{alaynaPage.incidentDescription.length}}</code> is now 1.</p>
  
  <p>How do I get this to work as expected?</p>
  
  <p>I got it to work via a hack but there has to be an easier way:</p>
  
  <pre><code>//in component:  
  theLength: number = 0;
  ngOnInit(): void {
      this.buildForm();
  
      (this.alaynaPageForm.controls['incidentDescription'] as FormControl).valueChanges.subscribe(value =&gt; {
        // do something with value here
        this.theLength = value.length;
      });
    }
  
  //in my html:
  &lt;small class="form-text text-muted"&gt;&lt;code&gt;{{theLength}}&lt;/code&gt; of &lt;code&gt;{{maxIncidentDescriptionLength}}&lt;/code&gt; characters&lt;/small&gt;
  </code></pre>