4

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

无法绑定到“controlGroup”，因为它不是“div”元素的已知属性，并且没有具有相应属性的匹配指令

索引.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>

雷达视图.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：“typeof Validators”类型上不存在“必需”属性。

我的代码有什么问题？

4

4 回答 4

3

感谢 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)。

于 2015-06-30T08:12:33.930 回答
3

自 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");
    }
}
于 2015-07-14T10:54:07.890 回答
1

尝试更改您的导入语句位置：

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

到from 'angular2/forms';

于 2015-06-29T23:05:02.110 回答
0

Angular 2 从一个版本到另一个版本发生了很大变化，属性不断被重命名，这就是你可能无法让它工作的原因。文档没有相应更新。

有关带有表单验证的待办事项示例应用程序的视频教程，请查看我的截屏视频，它是开源的。

https://youtu.be/267ClmzfzvI

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

于 2015-08-14T17:26:26.890 回答