問題タブ [angular2-forms]

私は Angular 2 アプリケーションを作成し、メンバーシップ システムに取り組んでいます。Register フォーム内に ControlGroup があり、そこには Password と ConfirmPassword が含まれており、あらゆる種類のログインが含まれています。この ngForm には電子メール コントロールもあります。

フォームのコントロールと FormBuilder の使用法を示すコンストラクター コードを次に示します。エラーメッセージなどを生成するためのコードがさらにあります。

Password コントロールと ConfirmPassword コントロールのみを含む ResetPassword フォームがあります。次に、特にパスワードを変更できる AccountSettings ページもあり、この 2 つのフィールドは ControlGroup として、その他の多くのフィールド (姓名、電話番号など) と一緒に含まれています。これらの 2 つのフィールドは基本的に 3 つの場所すべてで同じであり、詳細な検証に関してはいくらか同じです。パスワードには、小文字、大文字、特別、数字などが含まれている必要があり、ConfirmPassword は一致する必要があります。これはすべて機能していますが、3 つの場所すべてでコードを繰り返しました。非常にウェットなアプローチ。

私がやりたいことは、このネストされた ControlGroup からコンポーネントを作成し、それを FromBuilder で使用して、より大きな ControlGroup に追加することだと思います。だから私の質問は...すべてをドライに保つために、これら2つのコントロールのみで構成されるコンポーネント/コントロールグループを別の場所に作成し、そのコンポーネント/コントロールグループをより大きなフォームのコントロールグループの一部として含める方法はありますか? 3 つの場所すべてで使用し、ロジックを 3 回繰り返さないでください。

フォーム内で *ngIf と ngFormModel の両方を使用してフォームを検証するのに苦労しています。

ユースケースは次のとおりです。ユーザー入力に基づいて、フォーム内の特定のフィールドを非表示または無効にします。ただし、これらの入力が表示される場合は、検証する必要があります。

基本的な検証のみが必要な場合は、何らかの方法で行うことができます:

• 入力のみが必要な場合は、 と を使用して A-OK で動作しngControlますrequired
• 特定の形式が必要な場合は、pattern属性を使用できます。Angular ではありませんが、機能します。

しかし、より複雑な検証を実装するために、カスタム チェックを使用するようにngControl結合を使用しようとしています。ngFormModel次のページにあるコードを使用しました。

angular2（およびそこで参照されているリンク）にフォーム検証パターンを追加する方法

Angular2 フォーム: 検証、ngControl、ngModel など

私のコードは次のとおりです。

HTML

タイプスクリプト

*ngIf を使用して入力がテンプレートから削除された場合でも、コンストラクターは引き続きコントロールを参照しています。当然のことながら INVALID であるため、[disabled]="!formState.form.valid" を使用できなくなりmyFormます。

Angular 2 を使用して私が目指していることは可能ですか? これは珍しいユースケースではないと確信していますが、私の現在の知識では、どうすればそれを機能させることができるかわかりません。

ありがとう ！

私はこの列挙型を持っています（私はTypeScriptを使用しています）：

次のように、各オプションの列挙型整数値を値として、列挙型テキストをラベルとして、フォームに選択を作成したいと思います。

これどうやってするの ？

Angular2 (ベータ 8) でコンポーネントを開発しています。コンポーネントにはテキストボックスとドロップダウンがあります。コンポーネントが読み込まれるか、ドロップダウンの変更イベントが発生するとすぐに、テキストボックスにフォーカスを設定したいと思います。angular2でこれをどのように達成しますか。以下は、コンポーネントの Html です。

rxjsを使用して何でもストリームに変換できると言われています。ここでは、入力フィールドからのデータをストリームに変換し、後でそれをサブスクライブしたいのですが、valueChangesイベントを使用してangular2にメソッドがあります

しかし、このようなコンポーネントクラスでストリームを作成しようとすると

作成が認識されません。値が入力フィールドに変更されるときにrxjsでこれを行うにはどうすればよいですか。これはangular2フォームに関連しています。また、このストリームを作成するのに役立つ関数は何ですか?

サードパーティ (mailchimp/mailerlite) からのフォームがあります。私が抱えている問題は、ボタンをクリックすると、新しいウィンドウでフォームが開くことです。新しいウィンドウを開く代わりにポップアップさせたい。誰かが私にいくつかの指針を与えることができますか?

形

いくつかの CSS とは別に、インデックス ファイルに js スクリプトも含めます。

以下は、私が達成しようとしていることの実例です。以下の Web サイトはプレーンな HTML5 を使用して作成されていますが、Angular2 に切り替えようとしています。

[SIGN ME UP TODAY] ボタンをクリックします:
http://www.hedaro.com

json ファイルから動的フォーム (textarea 要素) を作成しようとしています。

そして、要素タイプにngSwitchを使用しています

しかし、私はエラーが発生しました

プランカー- フォーム 何が問題なのですか?

PS<md-input-container>がエラーを生成する

angular 2でngControlの値を使用して入力フィールドを検証しようとしています。ユーザーが常に大文字で値を入力することを検証する必要があります。

次に、ユーザーが入力した値を大文字に変換する必要があります。しかし、ngModel ではなく ngControl を使用して入力フィールドからの値を処理しています (ngModelChange イベントを使用して値を大文字に更新できた可能性があることを考慮してください)。

ngControl で使用される値を変換するための最良かつ低コストの方法は何ですか。

.ts ファイル内の私のコード フラグメント

.html ファイル内の私のコード フラグメント

私の問題

ngFormControl と検証は fname と lname で期待どおりに機能しますが、select の値を変更すると、常に ng-pristine (ng-dirty 状態ではない) および ng-invalid である性別の場合

要素に加えられた変更が<select>トリガーされないのはなぜですか.....何が問題なのか、私を助けたり、欠けているものを指摘したりできる人は誰でもわかりません

マーティンのコメントによると

<select>次のコードを追加して、signUpForm.value がコントロールの変更を反映していないことを確認します。

の出力{{checkSignUpFormModel}}は

{"fname":"max","lname":"pay",,"gender":""}

fname と lname テキスト ボックスへの変更は反映されて{{checkSignUpFormModel}} いますが、性別への変更は影響しません

NdFormValidation.gender は次のようになります