Geek Answers Handbook

Angular 2 - Unable to bind to 'controlGroup' since this is not the know property of the 'div' element

I am trying to create a small application using Angular2.0.0-alpha.28 (with corresponding .d.ts) + TypeScript 1.5.0-beta, and I received the following message:

It is not possible to associate with 'controlGroup', since this is not a known property of 'div', and there are no corresponding directives with the 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/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></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);

compilation

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

Also, when I try to use validators.required, it looks like it was not found:

this.form = builder.group({
    levels: ["5", Validators.required]
});

Error: (21, 38) TS2339: the 'required' property does not exist by type 'typeof Validators'.

What is wrong with my code?

+4
source share
4 answers

schmck Validators.required angular2.d.ts v.2.0.0-alpha.28.

: angular2.d.ts:

class Validators {
    static required: any;
}

(https://github.com/angular/angular/issues/2779), <div [control-group]="form"><input control="levels"> <div [ng-control-group]="form"><input ng-control="levels">. , No provider for ControlContainer! ($__0 -> ControlContainer).

+3

FormBuilder Alpha.28. NgFormModel ( 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");
    }
}
+3

:

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

to from 'angular2/forms';

+1
source

Angular 2 changes a lot from one release to another, properties are constantly being renamed, so you probably can't get it to work. Accordingly, the documentation is not updated.

For a video tutorial of the working application for todo samples with form validation, please check out your open source screencast.

https://youtu.be/267ClmzfzvI

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

0
source

More articles:


All Articles