[解決済み] Angular4 - フォームコントロールの値アクセサがない
質問
カスタム要素を持っています。
<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
が、うまくいきません。
input/selectがないのが原因のようですが...どうしたらいいのでしょうか?
このformControlにクリックをバインドして、誰かがカード全体をクリックすると、私の「タイプ」がformControlに押し出されるようにしたいのですが、どうすればいいですか?可能でしょうか?
解決方法は?
を使用することができます。
formControlName
を実装しているディレクティブにのみ適用されます。
ControlValueAccessor
.
インターフェイスの実装
というわけで、やりたいことをやるには、以下のような実装をしたコンポーネントを作る必要があります。
ControlValueAccessor
ということは
以下の3つの機能を実装しています。
:
-
writeValue
(モデルからビューに値を書き込む方法をAngularに伝える) -
registerOnChange
(ビューが変更されたときに呼び出されるハンドラ関数を登録します。) -
registerOnTouched
(コンポーネントがタッチイベントを受け取ったときに呼び出されるハンドラを登録します。コンポーネントがフォーカスされたかどうかを知るのに便利です。)
プロバイダを登録する
次に、このディレクティブをAngularに伝える必要があります。
ControlValueAccessor
(インターフェイスはTypeScriptからJavaScriptにコンパイルされる際にコードから取り除かれるため)。これを行うには
プロバイダを登録する
.
プロバイダは、以下のものを提供する必要があります。
NG_VALUE_ACCESSOR
と
既存の値を使用する
. また
forwardRef
をここに記述します。なお
NG_VALUE_ACCESSOR
は
マルチプロバイダ
.
例えば、カスタムディレクティブの名前が MyControlComponent である場合、以下の行を
@Component
デコレータを使用します。
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => MyControlComponent),
}
]
使用方法
コンポーネントを使用する準備ができました。とは
テンプレート駆動型フォーム
,
ngModel
バインディングが正しく動作するようになりました。
とともに
リアクティブフォーム
を適切に使用できるようになりました。
formControlName
で、フォームコントロールは期待通りの動作をするようになります。
リソース
関連
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。