title: Angular2/4 - Reactive forms and radio buttons: How to check one by default
body: <p>Please see this code snippet <a href="https://angular.io/api/forms/RadioControlValueAccessor" rel="nofollow noreferrer">from the docs</a>:</p>
  
  <blockquote>
    <p>When using radio buttons in a reactive form, ...</p>
  </blockquote>
  
  <pre><code>import {Component} from '@angular/core';
  import {FormControl, FormGroup} from '@angular/forms';
  
  @Component({
    selector: 'example-app',
    template: `
      &lt;form [formGroup]="form"&gt;
        &lt;input type="radio" formControlName="food" value="beef" &gt; Beef
        &lt;input type="radio" formControlName="food" value="lamb"&gt; Lamb
        &lt;input type="radio" formControlName="food" value="fish"&gt; Fish
      &lt;/form&gt;
  
      &lt;p&gt;Form value: {{ form.value | json }}&lt;/p&gt;  &lt;!-- {food: 'lamb' } --&gt;
    `,
  })
  export class ReactiveRadioButtonComp {
    form = new FormGroup({
      food: new FormControl('lamb'),
    });
  }
  </code></pre>
  
  <p>My question: <strong>What should I do to make one of those radio buttons checked by default?</strong> Do I need to add some additional property to the FormControl? Or should I modify something in the template?</p>
  
  <p>(I tried adding a <code>checked</code> attribute to one of them in the template, but for some reason it doesn't do anything. I looked at it in the browser using <em>"Inspect element"</em>, and the attribute is there in the DOM, yet it has no effect on the state of the radio button. It doesn't become checked.)</p>