AngularのReactive Formsで複数チェックボックスを制御

AngularのReactive Formsを利用して、複数チェックボックスがある場合にどれか一つでもチェックがされていない場合にエラーを表示する方法を解説します。

Reactive Forms とTemplate-driven forms

まず最初にReactive Formsの簡単な説明から。

Angularではform制御の方法として「Template-driven forms」と「Reactive Forms」が用意されています。

Template-driven formsは ngModelディレクティブを利用してフォームとモデルを直接紐付け、双方向データバインディングを行う方法です。

以下のサンプルではTemplate-driven formsで入力内容をページ内に表示をしています。

@Component({
  selector: 'my-app',
  template: `
    <div>
      input: <input type="text" [(ngModel)]="myText"><br>
      output: {{myText}}
    </div>
  `,
})
export class App {
  public myText = "hello";
}

Reactive FormsはFormControlを作成してフォームの値を管理します。

以下のサンプルではReactive Formsで入力内容をページ内に表示をしています。

@Component({
  selector: 'my-app',
  template: `
    <div>
      input: <input type="text" [formControl]="myText"><br>
      output: {{myText.value}}
    </div>
  `,
})
export class App {
  public myText = new FormControl();
}

どちらを使っても良いですが、Reactive FormsはFormGroupやFormArrayといった複数の入力項目をまとめる機能があるため、入力画面などの複数の入力項目があるような画面での利用に適しています。

Reactive Formsのバリデーション

Reactive Formsではバリデーション用の機能が用意されており、必須チェックや文字数のチェックが簡単に行うことができます。(Template-driven formsでも用意されております)

Validatorsクラスを読み込み、new FormControl()の第２引数で配列でバリデーションルールを指定していきます。

以下のサンプルでは必須、10文字以内のバリデーションを行いエラーがある場合はエラー内容をページ内に表示しています。

@Component({
  selector: 'my-app',
  template: `
    <div>
      input: <input type="text" [formControl]="myText">
      <strong *ngIf="myText.touched && myText.errors.required">
        必須
      </strong>
      <strong *ngIf="myText.touched && myText.errors.minlength">
        4文字以内
      </strong>
      <br>
      output: {{myText.value}}
    </div>
  `,
})
export class App {
  public myText = new FormControl('',[
    Validators.required,
    Validators.maxLength(10),
  ]);
}

myText.touchedは一度でもそのUIに触れられたかどうかの状態をもっており、初期表示時にいきなりエラーが表示されないように利用されます。

Reactive Formsのカスタムバリデーション

そろそろ本題に。

必須や最大何文字ようにバリデーションルールが用意されているものはよいのですが、「複数チェックボックスのうちどれか一つがチェックされていること」といったバリデーションはデフォルトでは用意されていません。

そういった場合は独自のバリデーションルールをカスタムバリデーションとして定義することができます。また複数のチェックボックと言った複数のUIの制御を行いたい場合はFormGroupもしくはFormArrayでUIのまとまりを作成します。

まずは動作サンプルとコードを確認ください。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <form
        [formGroup]="formGroup"
        (ngSubmit)="sumbit()"
        *ngIf="!sumbitSuccess"
      >
        <p>一つ選択してください</p>
        <div>
          <ng-container
            *ngFor="let checkbox of formGroup.controls.checkboxs.controls;let i = index"
          >
            <input type="checkbox" [formControl]="checkbox"> {{checkboxsItem[i]}}
          </ng-container>
        </div>
        <p
          *ngIf="formGroup.controls.checkboxs.touched && formGroup.invalid"
          style="color:red"
        >なにか選択してください</p>
        <div>
          <input type="submit" value="送信" #btn>
        </div>
      </form>
      <p *ngIf="sumbitSuccess" style="color:green">送信送信成功</p>
    </div>
  `,
})
export class App {
  public formGroup: FormGroup;
  public checkboxs: FormArray;
  public checkboxsItem = [
    '選択A' ,
    '選択B' ,
    '選択C' ,
    '選択D' ,
    '選択E' ,
  ];
  public sumbitSuccess = false;
  ngOnInit() {
    const checkboxs = this.checkboxsItem.map(reason => {
      return new FormControl(false);
    });
  
    this.formGroup = new FormGroup({
      checkboxs: new FormArray(checkboxs, this.multipleCheckbox),
    });
  }
   
  /**
   * 複数チェックボックスの必須チェックのカスタムバリデータ
   * @param { FromArray } fa チェックボックス
   */
  multipleCheckbox(fa: FormArray) {
    let valid = false;
    for (let i = 0; i < fa.length; i++) {
      if (fa.at(i).value) {
        valid = true;
        break;
      }
    }
    return valid ? null : {
      multipleCheckbox: true
    };
  }
   
  /**
   * 送信処理
   */
  sumbit(){
    // チェックボックスをtouchedに変更
    this.formGroup.controls.checkboxs.markAsTouched();
    // エラー時には送信しない
    if(this.formGroup.invalid){
      return;
    }
    // 送信処理、サンプルではあくまで見た目の切り替えのみ 
    this.sumbitSuccess= true;
  }
}

ポイントの1つ目はFormArrayを利用してチェックボックスのグルーピングを行っていること。

ngOnInit() {
    const checkboxs = this.checkboxsItem.map(reason => {
      return new FormControl(false);
    });
    
    this.formGroup = new FormGroup({
      checkboxs: new FormArray(checkboxs, this.multipleCheckbox),
    });
}

checkboxsでは複数チェックボックの状態を管理することができます。

もう一つのポイントはmultipleCheckboxというカスタムバリデーションを複数チェックボックに対して適応していること。multipleCheckboxではチェックボックスを精査して1つでもチェックがあるかを確認してある場合のみエラーを出力しています。

multipleCheckbox(fa: FormArray) {
    let valid = false;
    for (let i = 0; i < fa.length; i++) {
      if (fa.at(i).value) {
        valid = true;
        break;
      }
    }
    return valid ? null : {
      multipleCheckbox: true
    };
}

このように、カスタムバリデーションを利用することでReactive Formsで様々なことができるようになります。

また、送信ボタンが押された際にmarkAsTouched();を実行してUIを一度でもタッチされた状態に変更しています。

/**
 * 送信処理
 */
sumbit(){
    // チェックボックスをtouchedに変更
    this.formGroup.controls.checkboxs.markAsTouched();
    // エラー時には送信しない
    if(this.formGroup.invalid){
      return;
    }
    // 送信処理、サンプルではあくまで見た目の切り替えのみ 
    this.sumbitSuccess= true;
}

関連エントリー

Angularによるスライドアニメーション
続:AngularでChangeDetectionによるパフォーマンスチューニング
AngularでChangeDetectionによるパフォーマンスチューニング
SystemJSでAngular 2の環境を構築する

スポンサードリンク

• 2017年12月 1日 01:41
• カテゴリー Angular

«「秋のJavaScript祭 in mixi 2017」で「RxJSで始めるリアクティブプログラミング」というお話をしてきました。 | メイン | プロジェクトによりnodenvとndenvを切り替える»

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.