Twitter Bootstrap Question posted in

Twitter bootstrap – Angular 2 – Can't bind to 'controlGroup' since it isn't a know property of the 'div' element

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

index.html

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js">    </script>
</head>
<body>

<radar>Loading...</radar>
<script>System.import('radar-view');</script>

</body>
</html>

radar-view.ts

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

@Component({
selector: 'radar',
appInjector: [FormBuilder]
})
@View({
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 = builder.group({
        levels: ["5"]
    });
}
}

bootstrap(RadarView);

compiling

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 = builder.group({
    levels: ["5", Validators.required]
});

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

What’s wrong with my code?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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 (https://github.com/angular/angular/issues/2779), <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. 0

    Try changing your import statement location:

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

    to from 'angular2/forms';

    Login or Signup to reply.
  3. 0

    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";

@Component({selector:"ez-app"})
@View({
    template : `
        <div [ng-form-model]="controls">
            <input type="text" ng-control="name">
            <input type="text" ng-control="age">
        </div>
        <!--following part will chanage as you input-->
        <pre>{{dump()}}</pre>
        `
})    
class EzComp{
    constructor(){
        this.controls = new ControlGroup({
            name :new Control("Jason"),
            age : new Control("45")
        });
    } 
    dump(){
        return JSON.stringify(this.controls.value,null,"t");
    }
}
    Login or Signup to reply.
  4. 0

    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.

    https://youtu.be/267ClmzfzvI

    https://github.com/ajtowf/ng2_overview/tree/ng2

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

Back To Top
Search