如何在 Angular 2 中执行表单验证

Question

我目前使用的是 Angular 2 的 2.0.0-rc.1 版本，我正在尝试创建一些基本的表单验证，但我已经好几天没有进行此操作了，因为我无法克服这个错误：

No provider for ControlContainer

我在 Github 上查看了 this open issue，但几乎没有给出为什么会发生这种情况或如何解决它的信息。似乎从第一个测试版开始就存在这种情况。

我已经尝试导入和注入大多数与表单相关的内容（FORM_PROVIDERS、FORM_DIRECTIVES 随便你），但我最近的尝试是这样的：

import {NgForm, ControlContainer} from '@angular/common';

@Component({
  selector: 'form-input',
  templateUrl: 'alonglongtemplateurl.html',
  styleUrls: ['alonglongstyleurl.css'],
  directives: [
    NgForm
  ],
  providers: [
    ControlContainer
  ]
})

模板：

<div>
  <input ngControl="name">
</div>

然后我这样使用它：

<form #myForm="ngForm">
  <form-input></form-input>
</form>

尽管我注入了它要求的内容，但我仍然得到同样的错误。

自最新版本以来，在 Angular 2 中使用表单元素验证的正确方法是什么？

Answer 1

我认为您需要在输入周围有一个表单元素才能使用ngControl：

<div>
  <form>
    <input ngControl="name">
  </form>
</div>

form 指令是平台指令的一部分，因此您无需明确包含它们。提供者也一样。