Angular4 - フォームコントロールのアクセサーがありません

Question

私は自分のフォームに少し問題があります。

私は、カスタム要素をした：

<div formControlName="surveyType"> 
    <div *ngFor="let type of surveyTypes" 
     (click)="onSelectType(type)" 
     [class.selected]="type === selectedType"> 
    <md-icon>{{ type.icon }}</md-icon> 
    <span>{{ type.description }}</span> 
    </div> 
</div> 

私はformControlNameを追加しようとするが、角度いけない何かを知りたいとだけ言って：

ERROR Error: No value accessor for form control with name: 'surveyType' 

私は成功せずngDefaultControlを追加しようとしました。 入力/選択がないのでそれはそうですが、何をすべきかわかりません。

formControlに私の 'タイプ'を押し込むカード全体をクリックすると、このフォームコントロールにクリックをバインドしたいと思います。出来ますか？

Answer 1

にinputにformControlName="surveyType"を使うべきだと思います。

あなたが欲しいものを行うために、次の三つの機能実装を意味ControlValueAccessorを実装するコンポーネント、作成する必要があり、

だから、インターフェイスを実装します。

• writeValueは（伝えます
• registerOnChange（ビューが変更されたときに呼び出されるハンドラ関数を登録します）
• registerOnTouched（コンポーネントがタッチイベントを受け取ったときに呼び出されるハンドラを登録します。コンポーネントがフォーカスされているかどうかを知るのに便利です）。

プロバイダ

を登録すると、あなたは、このディレクティブはControlValueAccessor（それは活字体はJavaScriptにコンパイルされたコードから取り除かれるので、インターフェースはそれをカットするつもりはない）であることアンギュラ伝える必要があります。あなたはプロバイダーの登録によってこれを行います。

プロバイダはNG_VALUE_ACCESSORとuse an existing valueを提供する必要があります。こちらにforwardRefが必要です。 NG_VALUE_ACCESSORはmulti providerである必要があります。

カスタムディレクティブがMyControlComponent命名されている場合たとえば、あなたが@Componentデコレータに渡されたオブジェクト内の次の行に沿って何かを追加する必要がありますが：

providers: [ 
    { 
    provide: NG_VALUE_ACCESSOR, 
    multi: true, 
    useExisting: forwardRef(() => MyControlComponent), 
    } 
] 

使用

あなたのコンポーネントを使用する準備ができています。 template-driven formsでは、ngModelバインディングが正しく機能するようになりました。

reactive formsを使用すると、formControlNameを正しく使用できるようになり、フォームコントロールが正常に動作します。

リソース

• Custom Form Controls in Angular by Thoughtram
• Angular Custom Form Controls with Reactive Forms and NgMode by Cory Rylan

Answer 2

は、私はあなたが唯一のControlValueAccessorを実装ディレクティブにformControlNameを使用することができなくdiv