こんにちは。
みなさん、AngularのReactive Formsは使ってますか？

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

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

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

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

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

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

※念のため、弊社ブログにも全く同じ記事がありますが、コピーコンテンツではなく同一著者です。

対象読者

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

使い方

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

インストールします。

npm install --save ngx-type-safe-reactive-form

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

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と同じです。

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になっているので、必要であれば型アサーションを使用します。

    // as booleanを追加する
    rememberMe: false as boolean,