title: Angular 5 Reactive Forms - Radio Button Group
body: <p>I have 2 radio buttons, I'm using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can only select 1 radio button -- can never unselect and select the other one. Only allows me to select the same one.</p>
  
  <pre><code>this.genderControl = new FormControl("", Validators.required);
  </code></pre>
  
  <p>and then added to my Form Group</p>
  
  <pre><code>genderControl: this.genderControl,
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="radio-inline"&gt;
    &lt;input id="gender" type="radio" name="genderControl" formControlName="genderControl" /&gt;
    &lt;label class="radio-label"&gt; Male&lt;/label&gt;
    &lt;input id="gender" type="radio" name="genderControl" formControlName="genderControl" /&gt;
    &lt;label class="radio-label"&gt;Female&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Form Group</p>
  
  <pre><code>    this.personalInfo = new FormGroup({
    searchControl: this.searchControl,
    titleControl: this.titleControl,
    firstNameControl: this.firstNameControl,
    middleNameControl: this.middleNameControl,
    lastNameControl: this.lastNameControl,
    birthdayControl: this.birthdayControl,
    genderControl: this.genderControl,
    phoneControl: this.phoneControl,
    taxCanadaControl: this.taxCanadaControl,
    provinceControl: this.provinceControl,
    countryControl: this.countryControl,
    taxCountryControl: this.taxCountryControl,
  
    creditControl: this.creditControl
  });
  </code></pre>