Menu
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?
582
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).
69
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");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
