お久しぶりです。プログラムなどの記事を書きたいのに環境構築が面倒くさくてやめてしまう
せぃゆーです。
今日はangularでチェックボックスとか複数選択肢があってそのうち一つ以上の選択が必須の場合のバリデーションの作り方です。
angularって
- 入力したか入力してないか
- チェックボタンを押したか押してないか
- 入力内容のパターンチェック
- 文字数チェック
などはあるけど、
- この中から一つは絶対選んでね!
って時のチェックはデフォルトではついてないので自作する必要があります。
まぁとりあえずサンプル
サンプル
複数入力バリデーション
まずはいつも通り ng new multiple-validation でプロジェクト作成
モジュールの読み込み
これと言って特にないです。
FormsModule, ReactiveFormsModuleを読み込みます。
次にコンポーネントの作成
まず makeArray();
ここは、配列の作成です。今回は選択肢の数を動的に変更できるようにしました。
これでDBなどから持ってきたルールでバリデーションすることができます。
次は makeFormGroup();
実際にバリデーションのルールなどを決めている場所
this.formGroup = new FormGroup({checkboxs: new FormArray(checkboxs, this.multipleValid),});
この一文が重要です。
FormArrayでチェックボックスをまとめてcontrols名をcheckboxsでチェックの方法をmultipleValidという形式で定義しています。
ここで実際にチェックを行う関数 multipleValid()
値をループでチェックし、valueがあれば(tureなら)valid = true;
最終的にvalue = tureなら何も返さず、falseならエラーを返す
テンプレートの説明は省略します。
備考
今回チェックボックスの数を変更できるようにしたので、
cntChange()で変更しています。変更する前に
this.formGroup.removeControl(‘checkboxs’);
上記一文でバリデーションの削除を行っています。
動的にバリデーションを行うか行わないかの変化をするときに利用できます。
サンプル
複数入力バリデーション
コメント