こんにちは。鈴木商店の若林 (@itigoore01) です。
みなさん、Angular の Reactive Forms は使ってますか？
僕は仕事でも活用していて、めっちゃお世話になっています。
めっちゃ便利ですよね、 Reactive Forms。
しかし、こんなことありませんか？
フォームのvalueにアクセスするとき、型が欲しい～～～～
valueChangeをsubscribeしたときに型がないのつれぇ～～～～
FormGroupの子フォームにcontrolsでアクセスしたらタイポして実行時に怒られた。。。
これらは全部僕の体験談ですが、同じ苦しみを感じているのは僕だけではないはず！
ということで、Reactive Formsに型を追加したngx-type-safe-reactive-formというライブラリをnpmで公開しました。
対象読者
AngularのReactive Formsを使っているけど、型がなくて辛い人
使い方
リポジトリに使い方は書いていますが、一応こちらでも書いておきます。
インストールします。
|
1 2 |
npm install --save ngx-type-safe-reactive-form |
もし ReactiveFormsModule をインポートしていない場合は、インポートします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
コンポーネントを書いていきます。
ほとんど通常のReactive Formsと同じですが、FormBuilderの代わりにTypeSafeFormBuilderを使用しています。
TypeSafeFormBuilderの使い方はFormBuilderと同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import { Component } from '@angular/core'; import { TypeSafeFormBuilder } from 'ngx-type-safe-reactive-form'; @Component({ selector: 'app-root', template: ` <form [formGroup]="form" (submit)="submit()"> <input placeholder="Username" formControlName="username"> <input type="password" placeholder="Password" formControlName="password"> <input type="checkbox" formControlName="rememberMe"> <button type="submit">Output console</button> </form> `, styles: [] }) export class AppComponent { readonly form = this.formBuilder.group({ username: '', password: '', rememberMe: false, }); constructor( private formBuilder: TypeSafeFormBuilder, ) { } submit() { const { username, password, rememberMe } = this.form.value; console.log( `Username: ${username}\n` + `Password: ${password}\n` + `Remember me: ${rememberMe}` ); } } |
以下のとおり、ちゃんと型が効いています。
今回の例だとrememberMeがboolean型ではなくfalseになっているので、必要であれば型アサーションを使用します。
|
1 2 3 |
// as booleanを追加する rememberMe: false as boolean, |
お知らせ
鈴木商店では仲間を募集しています。
興味のある方は会社見学からでも構いませんので、ご応募ください！
