問題タブ [angular2-ngmodel]

オブジェクトの配列を ([ngModel]) でバインドしようとしていますが、その例を教えてください。

私は自分のフォームにバインドしたいパラメーターの配列を持っています。ここに構造があります:

私がやろうとしているのは、配列に存在する別のオブジェクトの値を編集することです。正確に行う方法はわかりません。これは単一のオブジェクトのテンプレートです:しかし、の場合の方法配列？

テンプレートに次のコードがあります。

私のコンポーネントでは：

これは問題なく機能しますが、最初は空のボックスがあります。そこにプレースホルダーメッセージを表示したい。ngModel を使用してこれを行うにはどうすればよいですか?

Angular2のValidatorsを使用して、フォームのフィールドにいくつかの検証を追加したいと考えています。

• 私はngFormを次のようなフォームにバインドしています:

#form="ngForm"

• フィールドの場合、私はngModelをバインドしています:

#field="ngModel", [(ngModel)]="model.field" type="text" name="field" placeholder="field"

新しいフォーム APIは ngForm と ngModel の使用を提案していますが、 angular.io docs には Validators の使用方法に関するドキュメントはありません。

NgModel へのapi 参照には、次のようなプロパティがあります validator : ValidatorFn。asyncValidator : AsyncValidatorFn

しかし、コンポーネントのクラスからフィールドを参照してバリデータを追加する方法がわかりません。

Angular2 アプリケーションで厄介な状況が発生しました。複数の行を持つテーブルがあり、各行には [(ngModel)] を使用した 2 ウェイ バインディングの列が含まれています。追加と削除の 2 つのボタンがあり、テーブルに使用される値のリストをプッシュ/スプライスします。

新しいアイテムをリストにプッシュするか、リストからアイテムをスプライス (削除) すると、テーブルが適切に更新されます。

唯一のバグは、リストから行 (項目) を削除してから新しい項目を追加すると、テーブルの 1 行が空の値で表示されることです。Chrome の開発者ツールで html ソースを確認したところ、モデルがの行には正しい値が含まれているため、表示上の問題のみです。どうしてですか？

Angular2 アプリのバックエンドでのみ検証を行うことにしました。このシナリオでは、ng2 の Forms、formBuilder、ngControls などの余分なコードは必要なく、多くのコードを追加しているようです。検証以外に何に役立ちますか?

(PS これが悪い考えであるという理由で応答しないでください。私たちはアプリのコンテキストを知っており、サーバー側のみの検証の長所と短所を認識しています。ng2 のフォームを使用しなかったことを後悔しているでしょうか。このシナリオでは? 他に役立つ機能や重要な機能はありますか?)

アプリ モジュールと機能モジュールがあります。「AudioPlayerComponent」というコンポーネントが機能モジュールで宣言されています。アプリモジュールで使用したいのですが、表示されません。エラーなし。

何か不足していますか？

アプリ モジュール:

機能モジュール:

オーディオ プレーヤー (番組) を使用する機能モジュール内のコンポーネント

audio-player を使用しようとするアプリ コンポーネント (表示されません):

angular 2 アプリケーション (RC 5、フォーム 0.3.0) で選択可能なオブジェクトのコレクションを表示したいと思います。

リスト自体は正しく表示されます。

ただし、「selectedItem」に表示されるのは [object Object] だけです。コードで項目にアクセスすると、対応する文字列 "[object Object]" が取得されます。ngValue に切り替えてみましたが、同じ結果になります。

オブジェクトの代わりにプリミティブ値を使用すると、すべてが機能します。しかし、私はここでいくつかの重要な点を見逃していると思います。

ご協力いただきありがとうございます。私はインターネット検索と試行錯誤に数時間を費やしてきました。誰かが同じ問題に遭遇したかもしれません。

編集(24-08-16): 今日、一般的なフォーム ウィジェットを作成する方法を説明するこのチュートリアルに出会いました。このページにたどり着いた人にとっては役に立つかもしれません: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

モデルの値にバインドされた入力があります。

この入力にデータを入力するために使用する日付ピッカーがあります。datepicker を介して値が選択された場合、入力はモデルを更新していないように見えます。これは、コード内でさらにパイプを起動していないためです。

ただし、入力フィールドに手動で入力すると、パイプが起動して新しい値に基づいてフィルタリングされるため、ngModel が更新されているように見えます。「変更時」ハンドラーを入力にバインドしました。これは、入力時または日付ピッカーの使用時に起動します。

ngModel 変更イベントを手動でトリガーする方法はありますか、または他の誰かが認識しているより洗練されたソリューションがありますか?

Angular 2 では、ngModel を「2 つの一方向データ バインディング」のようなものとして使用することは可能ですか?

ユーザーLinkedInからのインポートを提案として達成しようとしています。これは、フォームとともに別のモデルに投稿する必要があります。

angular docsでは、次のように述べられています。

[(ngModel)] の内部では、入力要素の値プロパティと入力イベントへの個別のバインディングを使用して、同じ結果を得ることができました。

[value] と (input) を 2 つの別個のデータ フローとして ngModel を使用する方法があるのではないかと考えました。つまり、インポートはユーザーモデルから作成され、会社モデルにポストされます。

以下は私のコードのスニペットです：

たとえば、以前のフォーム コードは次のよう になりました。

いくつかの typescript コード:

実際の http 要求が行われると、サーバー上のノード アプリがクラッシュします。もちろん、これは ngModel ではまったく実現できない可能性がありますが、わからないので、ここから始めます。言い換えれば... ngModel は angular 2 の 1 つのモデルのみにバインドする必要がありますか、それともデータをインポートしてこのデータを別のモデルに送信する必要があるようにカスタマイズできますか? これが理にかなっていることを願っています。

基本的に私の質問は次のとおりです: ngModel を使用してこの種のデータバインディングを行うのはスムーズな方法ですか、それとも私はこれでうまくいきますか?

また、LinkedIn からインポートすると、 「ユーザー」モデルから正しいデータを取得できます。