Question

我正在尝试使用Angular2.0.0-alpha.28（带有相应的.d.ts）+ TypeScript 1.5.0-beta构建一个小应用程序，我收到以下消息：

无法绑定到＆＃39; controlGroup＆＃39;因为它不是一个知道的属性＆＃39; DIV＆＃39;元素并没有匹配的指令相应的财产

的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>

雷达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);

编译

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

此外，当我尝试使用validators.required时，它看起来似乎也找不到：

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

错误：（21,38）TS2339：属性＆＃39;必需＆＃39;在类型上不存在＆＃39; typeof Validators＆＃39;。

我的代码出了什么问题？

Answer 1

感谢schmck Validators.required实际上不是常规angular2.d.ts v.2.0.0-alpha.28的一部分。

对于这个问题，解决方案是将以下内容添加到angular2.d.ts：

class Validators {
    static required: any;
}

同样来自Pawel Kozlowski（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)。

Answer 2

自Alpha.28以来，

FormBuilder 似乎已被放弃。您应该使用 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");
    }
}

Answer 3

尝试更改导入语句位置：

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

到from 'angular2/forms';

Angular 2 - 无法绑定到＆＃39; controlGroup＆＃39;因为它并不是“div”的特性。元素

3 个答案: