Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
igGrid 入力検証を利用してみよう

igGrid の入力検証を利用してみましょう。

入力検証は、igGrid の編集機能(igGridUpdating)のオプションとして設定していきます。ここでは、igGridUpdating > columnSettings にある required オプションと validation オプションを設定していきます。


required オプション

入力が必須となる列であれば、required オプションを設定します。 

  $("#grid").igGrid({
    ...
    features: [
        {
            name: "Updating",
            columnSettings: [
                ...
                {
                    columnKey : "Col1",
                    required: true,
                    ...
                },
                ...
            ]
        }
    ]
  });

  


Col1 列を編集し、セルの値が空の状態で編集を終了しようとすると、エラーメッセージが表示されます。

required オプション



validation オプション

igGrid の入力検証は、igValidator を組み合わせることでより柔軟な検証条件を指定することもできます。例えば、ある列には任意の値入力を抑止したい際には、igValidator の custom オプションを組み合わせて利用することができます。ここでは、Col2 列のセルに "b1" という入力があった場合にはエラーとするようにロジックを実装しています。

  
{
    columnKey : "Col2",
    editorOptions:{
        validatorOptions:{
            custom: function(value, fieldOptions){
                if(value == "b1"){
                    //入力検証に失敗するときは false を返す
                    return false;
                }
                //入力検証に成功するときは true を返す
                return true;
            }
        }
    }
}

image




igValidator では、エラーメッセージをデフォルトの文字列から置き換えることもできます。”Col1” と “Col2” それぞれの、デフォルトのエラーメッセージを変更してみましょう。

エラーメッセージは editorOptions > validatorOptions > errorMessage オプションで任意の文字列を指定します。

{
    columnKey : "Col1",
    required: true,
    editorOptions:{
        validatorOptions:{
            errorMessage : "必ず入力して下さい"
        }
    }
},
{
    columnKey : "Col2",
    editorOptions:{
        validatorOptions:{
            custom: function(value, fieldOptions){
                if(value == "b1"){
                    //入力検証に失敗するときは false を返す
                    return false;
                }
                //入力検証に成功するときは true を返す
                return true;
            },
            errorMessage: "b1 は無効です。"
        }
    }
}


Col1 のエラーメッセージ
errorMessage


Col2 のエラーメッセージ
image



サンプル

サンプルのダウンロード(Ignite UI 2016.2 バージョン)
(本サンプルは 16.2.20162.2114 バージョンで作成されました)

Posted: 29 May 2017, 12:24

Comments

No Comments

Anonymous comments are disabled