TypeScriptでdhtmlXFormに独自Validationを設定する

こんにちは。beaglesoftの真鍋です。

最近はフロントエンドはJavaScriptではなくTypeScriptでプログラムを書いています。TypeScriptはクラスの概念があるのでプログラムが書きやすいですね。

さて、TypeScriptでDHTMLXを扱うとき、基本的に困ることはないのです。しかし、いくつか戸惑うこともありましたが、独自Validationの設定方法について簡単にまとめました。

dhtmlXFormで独自Validation(Custom rules)を指定する

dhtmlXFormAPIで表示するFormのvalidationに独自validation(Custom rules)を指定する場合、以下の通り対象となるメソッドを文字列で指定します。

var formData = [{type: "input", label: "Number", validate:"Greater100"}];
...
function Greater100(data){ 
        return (data>100);
}

Validation DHTMLX Docs

では、これをTypeScriptではどのように実現すれば良いでしょうか。名称を指定する場合には、インスタンスメソッド、スタティックメソッドで定義の仕方が分かれそうです。インスタンスメソッドはどのように記述すれば良いでしょうか。

いろいろと試してみたのですが、どうやらメソッド名だけではなくメソッドを直接設定できるようです。（attachEventメソッドと同じです。）

ということで、以下の方法で正しく動作することを確認しました。

// this.メソッド名を独自validationとして設定することで動作する
var formData = [{type: "input", label: "Number", validate:this.Greater100}];
...
function Greater100(data){ 
        return (data>100);
}

これはとてもわかりやすくて良いですね。

TypeScriptとDHTMLX

TypeScriptとDHTMLXを利用するときに、できればType DefinitionがDHTMLXにあるといいなぁと感じますが、なくても大して不便を感じていないのが現状です。TypeScriptできっちりとコンポーネントを利用する枠組みを作成して、その枠組みでどのようにコンポーネントを作成するかという視点で考えると便利です。