2016-05-15 24 views
0

10進数のみ、最小値、最大値などのカスタム検証でカスタム入力フィールドコンポーネントを作成しています。その後、アプリケーション全体でさまざまな形式で再利用します。マッサージとAngular2:EXCEPTION:No指示文の注釈がコントロールに見つかりません

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

アプリケーションのクラッシュ:「例外:コントロール上で見つかりません指令注釈」

カスタム入力コンポーネントのサンプルコードを以下に示します。

下図のように、私は、彼らが同様のアプローチを使用しますが、入力要素は、ngFormに設定されている与えられた入力のための一時的なローカル変数を持つフォーム内にあるAngular2フォーム上のさまざまなチュートリアルをGoogleで検索している:

ngControl="test" 
#test = "ngForm" 

マイ質問は、それはフォームなしで入力コンポーネントでngControlを使用することは可能ですか?はい、次に例外を修正する方法は?

角度2 - RC1と材料2を使用しています。

答えて

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

+0

パーフェクトです..あなたに感謝 – ravi

関連する問題