title: How to create a custom radio button angular component that works with ReactiveForms
body: <p>I created a custom radio button that basically just stores the current value in the model attribute and in the styling checks to see if the model and value equal each other. This code works perfectly fine when using template forms and the <code>[(ngModel)]</code> attribute on the tag. However, when I try this with reactive forms and the <code>formControlName</code> attribute it doesn't seem to get the values from the other components. It seems that the model is not getting updated. Am I doing something wrong?
  Here is my basic code (I've removed some things that aren't too important)</p>
  
  <p>Here is a stackblitz of the issue: <a href="https://stackblitz.com/edit/angular-rl3sez" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-rl3sez</a></p>
  
  <p>It seems that the defaulting works correctly, when building the component using <code>FormBuilder</code> I default it to true and the first item is selected; however, when I click on the second item the first is not deselected.</p>
  
  <p>Any ideas what I am missing?</p>
  
  <h2>UPDATE</h2>
  
  <p>I managed to find an ugly solution which seems to highlight the issue I am having. If I patch the value to the control on every change it works correctly. I think that for some reason the write value isn't getting called correctly.
  Here is the stackblitz: <a href="https://stackblitz.com/edit/angular-dgu2fj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-dgu2fj</a></p>