Zenn
👏

FormlyとAngularの組み合わせで効率的にフォーム作成しよう!

2024/09/25に公開
Angular
formly
tech

はじめに

Angularでのフォームの作成と管理は時間を要する作業です。
業務でFormlyとAngularを組み合わせて実装した際に、効率的に開発できたので、本記事ではそのメリットと活用方法を詳しく解説します！

Formlyとは

JSONベースのフォーム自動生成ライブラリです。
Formlyを使用すると従来のReactive Formsの実装より、コード量が少なく高度なフォーム作成を実現することができます。

https://formly.dev/

なぜFormlyとAngularを組み合わせるべきか？

コンポーネント側でフォームの設定をJSON形式で実装していくので、テンプレート側の実装が従来のReactiveFormsよりも圧倒的にコード量を減らせます。
実装がコンポーネント側に寄るので、フォーム管理もとても楽になります。

Reactive Formsの場合

AngularのReactive Formsを使用してフォームを作成する際には、フォームグループの定義、各フォームコントロールの設定、バリデーションの追加、テンプレートでのバインディングなど、多くのコードを記述する必要があります。例えば、以下はシンプルなログインフォームをReactive Formsで実装する場合のコードです。

従来のReactive Formsで実装したコンポーネント

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
})
export class LoginFormComponent implements OnInit {
  loginForm: FormGroup;

  ngOnInit() {
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
    }
  }
}

従来のReactive Formsで実装したテンプレート


<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="email">Email:</label>
    <input id="email" formControlName="email" type="email" />
    <div *ngIf="loginForm.get('email').invalid && loginForm.get('email').touched">
      有効なメールアドレスを入力してください。
    </div>
  </div>

  <div>
    <label for="password">Password:</label>
    <input id="password" formControlName="password" type="password" />
    <div *ngIf="loginForm.get('password').invalid && loginForm.get('password').touched">
      パスワードは必須です。
    </div>
  </div>

  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>

フォームグループやコントロールの設定、バリデーション、テンプレートでのエラーメッセージ表示など、多数のコード行が必要となります。

Formlyを使用した場合

Formlyを利用すると、フォームの構成をJSON形式の設定ファイルとして記述できるので、上記のような複雑なコードを書く必要がなくなります。
以下のコードは、同じログインフォームをFormlyで実装する場合の例です。

Formlyで実装したコンポーネント

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-login-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form [fields]="fields" [form]="form" [model]="model"></formly-form>
      <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Login</button>
    </form>
  `,
})
export class LoginFormComponent {
  form = new FormGroup({});
  model = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        label: 'Email',
        placeholder: 'Enter your email',
        required: true,
        type: 'email',
      },
      validators: {
        validation: ['email'],
      },
      validation: {
        messages: {
          required: 'メールアドレスは必須です。',
          email: '有効なメールアドレスを入力してください。',
        },
      },
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        label: 'Password',
        placeholder: 'Enter your password',
        required: true,
        type: 'password',
      },
      validation: {
        messages: {
          required: 'パスワードは必須です。',
        },
      },
    },
  ];

  onSubmit() {
    if (this.form.valid) {
      console.log(this.model);
    }
  }
}

テンプレートはシンプルで、Formlyのformly-formコンポーネントを利用するだけで完結します。

Formlyで実装したテンプレート

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <formly-form [fields]="fields" [form]="form" [model]="model"></formly-form>
  <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Login</button>
</form>

まとめ

Formlyを使うことで、参考例のようにAngularのフォーム作成をより簡潔に効率的に行うことができます。特に、大規模なフォームや複数のフォームを管理する場合には、Formlyを導入することで開発時間の短縮とコードの可読性向上が期待できますので是非参考にしてみてください！

採用情報

エムアイ・ラボでは一緒に開発に携わってくれるエンジニアを積極的に採用中です！
ぜひお気軽にご連絡ください。

https://www.wantedly.com/companies/milab-inc

Discussion