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);
}

应用程序因按摩而崩溃：＆＃34; EXCEPTION：在Control＆＃34;上找不到指令注释。

我用Google搜索了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：EXCEPTION：在控制

1 个答案: