title: Angular 2 - Can't bind to 'controlGroup' since it isn't a know property of the 'div' element
body: <p>I'm trying to build a small app using Angular2.0.0-alpha.28 (with corresponding .d.ts) + TypeScript 1.5.0-beta and I got the following message: </p>
  
  <blockquote>
    <p>Can't bind to 'controlGroup' since it isn't a know property of the
    'div' element and there are no matching directives with a
    corresponding property</p>
  </blockquote>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Angular 2&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" /&gt;
  
  &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
  &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"&gt;    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;radar&gt;Loading...&lt;/radar&gt;
  &lt;script&gt;System.import('radar-view');&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>radar-view.ts</strong></p>
  
  <pre><code>/// &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
  import {Component, View, bootstrap} from 'angular2/angular2';
  import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/angular2';
  
  @Component({
  selector: 'radar',
  appInjector: [FormBuilder]
  })
  @View({
  template: '&lt;div [control-group]="form"&gt;&lt;input control="levels"&gt;    {{form.controls.levels.value}}&lt;/div&gt;',
  directives: [formDirectives]
  })
  export class RadarView {
  form: ControlGroup;
  builder: FormBuilder;
  
  constructor(builder: FormBuilder) {
      this.builder = builder;
      this.form = builder.group({
          levels: ["5"]
      });
  }
  }
  
  bootstrap(RadarView);
  </code></pre>
  
  <p><strong>compiling</strong></p>
  
  <pre><code>tsc --watch --target es5 --module commonjs --emitDecoratorMetadata
  </code></pre>
  
  <p>Also when I try to use validators.required it looks like it's not found either:</p>
  
  <pre><code>this.form = builder.group({
      levels: ["5", Validators.required]
  });
  </code></pre>
  
  <blockquote>
    <p>Error:(21, 38) TS2339: Property 'required' does not exist on type
    'typeof Validators'.</p>
  </blockquote>
  
  <p>What's wrong with my code?</p>