skip to Main Content

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:

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


<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular 2</title>

<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href=",600" />

<script src="[email protected]/traceur-runtime.js"></script>
<script src="[email protected]"></script>
<script src="">    </script>




/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/angular2';

selector: 'radar',
appInjector: [FormBuilder]
template: '<div [control-group]="form"><input control="levels">    {{form.controls.levels.value}}</div>',
directives: [formDirectives]
export class RadarView {
form: ControlGroup;
builder: FormBuilder;

constructor(builder: FormBuilder) {
    this.builder = builder;
    this.form ={
        levels: ["5"]



tsc --watch --target es5 --module commonjs --emitDecoratorMetadata

Also when I try to use validators.required it looks like it’s not found either:

this.form ={
    levels: ["5", Validators.required]

Error:(21, 38) TS2339: Property ‘required’ does not exist on type
‘typeof Validators’.

What’s wrong with my code?



  1. Chosen as BEST ANSWER

    Thanks to schmck Validators.required is actually not part of the regular angular2.d.ts v.2.0.0-alpha.28.

    For this issue the solution is to add the following to angular2.d.ts:

    class Validators {
        static required: any;

    Also from Pawel Kozlowski (, <div [control-group]="form"><input control="levels"> must be replaced by <div [ng-control-group]="form"><input ng-control="levels">. This still doesn't work as I get now No provider for ControlContainer! ($__0 -> ControlContainer).

  2. Try changing your import statement location:

    import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/angular2';

    to from 'angular2/forms';

    Login or Signup to reply.
  3. FormBuilder seems abandoned since Alpha.28. You should use NgFormModel instead like this(in ES6):

    import {Component,View,bootstrap} from "angular2/angular2";
    import {Control,ControlGroup,formDirectives} from "angular2/forms";
        template : `
            <div [ng-form-model]="controls">
                <input type="text" ng-control="name">
                <input type="text" ng-control="age">
            <!--following part will chanage as you input-->
    class EzComp{
            this.controls = new ControlGroup({
                name :new Control("Jason"),
                age : new Control("45")
            return JSON.stringify(this.controls.value,null,"t");
    Login or Signup to reply.
  4. Angular 2 is changing a lot from one release to another, the properties are constantly renamed, that’s why you probably can’t get it to work. The documentation isn’t updated accordingly.

    For a video tutorial of a working todo sample application with form validation please check out my screencast, it’s open source.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top