안녕하세요.
여러분, 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,