Angular の FormBuilder (Reactive Forms) に型を追加する ngx-type-safe-reactive-form を公開しました

2019年08月20日
投稿者:若林 奨太
カテゴリ:Angular タグ:,

こんにちは。鈴木商店の若林 (@itigoore01) です。
みなさん、Angular の Reactive Forms は使ってますか?

僕は仕事でも活用していて、めっちゃお世話になっています。
めっちゃ便利ですよね、 Reactive Forms。
しかし、こんなことありませんか?

フォームのvalueにアクセスするとき、型が欲しい~~~~

valueChangeをsubscribeしたときに型がないのつれぇ~~~~

FormGroupの子フォームにcontrolsでアクセスしたらタイポして実行時に怒られた。。。

これらは全部僕の体験談ですが、同じ苦しみを感じているのは僕だけではないはず!

ということで、Reactive Formsに型を追加したngx-type-safe-reactive-formというライブラリをnpmで公開しました。

対象読者

AngularのReactive Formsを使っているけど、型がなくて辛い人

使い方

リポジトリに使い方は書いていますが、一応こちらでも書いておきます。

インストールします。

もし ReactiveFormsModule をインポートしていない場合は、インポートします。

コンポーネントを書いていきます。
ほとんど通常のReactive Formsと同じですが、FormBuilderの代わりにTypeSafeFormBuilderを使用しています。
TypeSafeFormBuilderの使い方はFormBuilderと同じです。

以下のとおり、ちゃんと型が効いています。

capture.gif

今回の例だとrememberMeboolean型ではなくfalseになっているので、必要であれば型アサーションを使用します。

お知らせ

鈴木商店では仲間を募集しています。
興味のある方は会社見学からでも構いませんので、ご応募ください!

採用情報


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です