Angular Basics-10

AngularBasicsシリーズのパート10へようこそ。このパートでは、Angularでフォームを作成するためのリアクティブアプローチについて学習します。

ここから出発点をとることができます。

プロジェクトには単純なhtmlフォームがあり、これをAngularリアクティブアプローチに変更します。

最初に行うことは、app.module.tsファイルでFormsModuleをReactiveFormsModuleに変更することです。

次に、app.component.tsファイルにsignupFormを追加し、次にngOnInitにユーザー名、電子メール、性別を追加します。

サインアップフォームをコンソールログに記録するonSubmitもあります。

これで、app.component.htmlファイルにformGroup、ngSubmit、formControlNameを追加して完了です。

これで、ローカルホストで値を追加してフォームを送信すると、値が取得されます。

次に、プロジェクトにバリデーターを追加します。これについては、最初にapp.component.tsファイルで、FormControlにバリデーターを追加します。

次に、app.component.htmlファイルに、ユーザー名または電子メールが有効かどうかを確認するgetメソッドを追加します。

ここで、app.component.cssファイルに、エラー時に赤い境界線を表示するクラスを追加します。

現在、検証はローカルホストで完全に機能しています。

次に、ngOnInitのsetValueを使用して、フォームのデフォルト値を取得してフォームを完成させます。また、ユーザーがフォームを送信した後、フォームをリセットします。

これでアプリが完成し、デフォルト値が選択され、リセットも正しく機能します。同じコードは、このgithubリポジトリから取得できます。