問題タブ [angular2-ngmodel]

属性ディレクティブを使用して入力中に入力フィールドの値を変更 (強制) したい。それを使用して、フォームの入力フィールドで使用される大文字、小文字、maxlength、filterchar などのディレクティブを作成したいと思います。この例を見つけました: Angular 2 Attribute Directive Typescript Exampleですが、これはうまくいかないようです。Angular2 の以前のビルドではそうなったのかもしれません。しかし、それはまさに私がやりたいことです。

次のようなディレクティブを作成すると:

そして、次のようなフォームで使用します。

（そしてNgModelプロバイダーとして登録します）。私は得る

未定義の this.model.value。

私は$event.target.value = $event.target.value.toUpperCase()（ で渡すときに$event）使用できonInputChange()、それはビューで機能します（入力は大文字で表示されますが、バインドフィールド「field.name」は更新されません。

では、これを行う Angular2 属性ディレクティブを作成するにはどうすればよいでしょうか?

- 編集 -

さらなる調査の後、私はなんとか欲しいものを手に入れることができました。ギュンターが提供した答えは、私の当初の意図に近く、おそらくより良いものです。しかし、ここに別の方法があります：

私が言ったように、これがこれを行う良い方法であるかどうかはわかりませんので、コメントを歓迎します.

チェックボックスに双方向バインディングを使用したいのですが、使用する[(ngModel)]と、チェックされた項目の値の代わりに true または false が表示されます。これがどのように行われるか知っている人はいますか？

私の場合、双方向バインディングを使用して「expression.value」に設定したい場合は、どうすればよいですか。

この場合、チェックボックスの値をバインドしたいと思います: オプション 1 を式クラスにバインドします。

次のようなオプションを含む html 選択があります。

roles[] は、私のサービスからのオブザーバブルのサブスクライブで割り当てられます。ロール[]がロードされた後でも、選択が最初は空であることを除いて、すべてが正常に機能しています。ロール[]がサービスからロードされたときにすぐに最初のオプションを表示する選択ドロップダウンが欲しいです。そして、その「役割」も変更します。

選択またはオプションでngInitを使用することを考えていますが、機能しないようです。また、オブザーバブルが返された後にコンポーネントにロールを割り当てることも考えましたが、ロール[]がロードされる前にロール[0]が常にnullであるため、それが可能かどうかわかりません。

重要な場合は、サブスクライブ コードを次に示します。

}

次のシナリオを検討してください。three を使用しNameInputComponentて、それぞれテキスト入力をラップし、次を構築しFullNamesComponentます。

• 2 つNameInputComponentの s、個々の名のペア ( firstName1& firstName2)
• 1 つNameInputComponent、共通の姓 ( sharedLastName)

FullNamesComponent は、次の 2 つの完全な名前を公開する必要があります。

• fullName1 = firstName1 + ' ' + sharedLastName
• fullName2 = firstName2 + ' ' + sharedLastName

これらのコンポーネントを一緒にリンクする適切な方法は何でしょうか? を使用してみngModelました。これにより、入力の値を の変数にバインドできますが、NameInputComponent構築を続ける方法がわからなくなって、親コンポーネントでこれらの値を使用して何かを行うことができます。私が理解していることから、を使用しEventEmitterて値を親から消費可能にする必要がありますが、これについてどうすればよいかわかりません。

これは送信されるフォームとして使用されていないことに注意してください。出力にバインドしてページの他の部分に使用したり、ページの他のセクションへのバインディングを介して/プログラムで入力の内容を変更したりできるようにしたいと考えています。

これが私がこれまでに持っているものです：

name-input.component.ts

フルネーム.component.ts

次のような日時ピッカー ディレクティブを作成しようとしています。
<input [(ngModel)]="date1" datetime-picker date-only />

date1日付として割り当てられます。new Date()

これをhtmlで表示すると、入力要素のテキストは次のようになります
Thu Jan 01 2015 00:00:00 GMT-0500

代わりに次のように表示したい
2015-01-01 00:00:00

デフォルトの toString() 関数からの結果を表示する代わりに、DatePipe を使用してディレクティブ内で日付をフォーマットしたいと考えています。

私の質問は; 「ディレクティブ内で、どうすれば ngModel 変数にアクセスできますか?」、たとえば date1 など、toString() メソッドを追加できるようにします。

私のアプローチが正しくない場合は、アドバイスしてください。