Angular2：例外：在控件上找不到指令注释

Question

我正在构建一个带有自定义验证的自定义输入字段组件，例如仅十进制数字、最小值、最大值等。稍后我将在我的应用程序中以各种形式重用它。

自定义输入组件示例代码如下：

import { Component } from '@angular/core';
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
import {Control, Validators} from '@angular/common';

@Component({
  selector: 'test',
  template: `<md-input 
              placeholder="test"
              ngControl="test"
              id = "test"                    
              required>
              <md-hint *ngIf="!test.valid">Not a valid input</md-hint>
             </md-input>`,
  directives: [MD_INPUT_DIRECTIVES, Control] 
})
export class TestComponent {
  test = new Control('',Validators.required);
}

应用程序因按摩而崩溃："EXCEPTION: No Directive annotation found on Control"。

我用谷歌搜索了各种关于 Angular2 表单的教程，它们使用类似的方法，但输入元素在表单内，临时局部变量将给定输入设置为 ngForm，如下所示：

ngControl="test"
#test = "ngForm"

我的问题是，是否可以在没有表单的情况下在输入组件中使用 ngControl？是的，那么如何解决异常？

我正在使用 Angular 2 - RC1 和 material2。

Answer 1

Control 不是指令，您要查找的指令是 NgFormControl。所以：

import {Control,NgFormControl, Validators} from '@angular/common';

@Component({
  ...
  template: `<md-input 
              placeholder="test"
              [ngFormControl]="test"
              id = "test"                    
              required>
              <md-hint *ngIf="!test.valid">Not a valid input</md-hint>
             </md-input>`,
  directives: [MD_INPUT_DIRECTIVES, NgControl] 
})
export class TestComponent {
  test = new Control('',Validators.required);
}

这是一个plunk

Angular2：例外：在控件上找不到指令注释

Angular2 : EXCEPTION: No Directive annotation found on Control

angularjs

angular2-forms

angular