title: What is the difference between formControlName and FormControl?
body: <p>I'm using <code>ReactiveFormsModule</code> of Angular2 to create a component that contains a form. Here is my code:</p>
  
  <p><strong>foo.component.ts</strong>:</p>
  
  <pre><code>constructor(fb: FormBuilder) {
      this.myForm = fb.group({
          'fullname': ['', Validators.required],
          'gender': []
      });
  }
  </code></pre>
  
  <p><strong>foo.component.html</strong> (with <code>[formControl]</code>):</p>
  
  <pre><code>&lt;div class="fields"&gt;
      &lt;div class="field"&gt;
          &lt;label&gt;Fullname*&lt;/label&gt;
          &lt;input type="text" [formControl]="myForm.controls.fullname"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="inline fields"&gt;
      &lt;label for="gender"&gt;Gender&lt;/label&gt;
      &lt;div class="field"&gt;
          &lt;div class="ui radio checkbox"&gt;
              &lt;input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"&gt;
              &lt;label&gt;Male&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
          &lt;div class="ui radio checkbox"&gt;
              &lt;input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"&gt;
              &lt;label&gt;Female&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>foo.component.html</strong> (with <code>formControlName</code>):</p>
  
  <pre><code>&lt;div class="fields"&gt;
      &lt;div class="field"&gt;
          &lt;label&gt;Fullname*&lt;/label&gt;
          &lt;input type="text" formControlName="fullname"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="inline fields"&gt;
      &lt;label for="gender"&gt;Gender&lt;/label&gt;
      &lt;div class="field"&gt;
          &lt;div class="ui radio checkbox"&gt;
              &lt;input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender"&gt;
              &lt;label&gt;Male&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
          &lt;div class="ui radio checkbox"&gt;
              &lt;input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender"&gt;
              &lt;label&gt;Female&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both ways work. But i cannot figure out what is the difference between using <code>[formControl]</code> and <code>formControlName</code>.</p>