雑な電卓ツールを Angular で作った
今日も Angular Utilities に追加したツールの話。
今日は、テキストエリアに入力された数式を計算する電卓ツールを雑に作った。
「計算式」テキストボックスに「(1+2) ÷ 5」などと入力すると、この入力値を「(1+2) / 5」と解釈し、計算結果が「0.6」である、と出力してくれる。
÷ のような全角文字や １２３４５ のような全角数字も、よく入れそうなモノは半角文字に変換して計算できるようにしている。半角に変換したら、eval() に突っ込んで計算結果を得ようとしている、とても乱暴なやり方。
eval() に失敗した時は try / catch でハンドリングして、アプリがエラーで落ちないようにしている。
入力値に数字や記号以外の異常な文字が入った場合を判定するため、自作の ReactiveForms 向け Validator を作っている。ValidatorFn は AbstractControl を引数に取る関数を return するように作ってやると、バリデータとしてセットできる。テキストボックスに赤や緑のフィードバックを付けるのは、invalid かをチェックして Bootstrap 3 の .has-error クラスを当てたりしている。
ReactiveForms のお勉強も兼ねて、ちょっとしたモノを作ってみた。