Angular2：最新的简单形式示例？ （2016年2月）

Question

问：有人可以扩展此代码段以便我可以使用它吗？

我已经尝试了一些不同的表单教程，它们都有所不同，似乎没有任何工作。我不明白为什么_fb: FormBuilder没有被加载/导致＆＃34; 意外令牌＆lt;错误＆＃34;

这是我的基本应用：

formExample.component.ts：

import {Component} from 'angular2/core';
import {OnInit} from 'angular2/core';


@Component({
  selector: 'form-example',
  template: `
    <h3>Form Example</h3>
    <form [ngFormModel]="testForm" (submit)="checkValues($event)">
      <input ngControl="name" type="text" placeholder="name">
      <button type="submit">Submit</button>
    </form>
  `
})


export class FormExampleComponent {

  constructor(private _fb: FormBuilder) {
    this.testForm = _fb.group({
      name: ["", Validators.required]
    });
  }

  ngOnInit() {

  }

  checkValues(event) {
    event.preventDefault();
    var name = this.testForm.value;
    alert(name);
  }

}

main.ts：

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';


bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

Answer 1

包含对FormBuilder和Validators的引用：

import {FormBuilder, Validators} from 'angular2/common';

如果您已包含对Http的引用，请确保包含脚本标记：

<script src="node_modules/angular2/bundles/http.dev.js"></script>