title: Angular 2 [disabled] is not working
body: <p>I need to disable the <strong>Add Hero</strong> button when there is nothing on the text box.Can you tell me why this is not working ?</p>
  
  <pre><code>&lt;form novalidate #f="ngForm"&gt;
  
  &lt;ul&gt;
    &lt;li *ngFor="let hero of heroes"&gt;{{hero.name}}&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;label&gt;New hero name: &lt;input required #newHeroName /&gt;&lt;/label&gt;
  &lt;button (click)="addHero(newHeroName.value); newHeroName.value=''" 
           [disabled]="f.invalid"&gt;Add Hero&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Plunker is here : <a href="https://plnkr.co/edit/KGzje3JP0of5MmXvgeyJ?p=preview" rel="nofollow noreferrer"><strong>Plunker</strong></a></p>
  
  <p>The file is this : <code>app/toh/hero-list.component.html</code></p>
  
  <p><a href="https://i.stack.imgur.com/dbNCf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dbNCf.jpg" alt="enter image description here"></a></p>