Javascriptのフレームワークの一種であるAngularJSを、とあるオリジナルウェブアプリケーションの保守をきっかけに触るようになりました。と言っても、やっているのはフォームバリデーションくらいですが…。それでも、とても便利です。
ある時、hiddenフィールドをテキストフィールドと同じようにバインディングさせようとして下記のように書きました。
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
</head>
<body ng-controller="MyController">
<form action="output.php" method="post" accept-charset="utf-8" name="myForm" novalidate>
<input type="text" name="name" ng-model="user.name" ng-required="true" placeholder="">
<input type="hidden" name="comment" ng-model="user.comment">
<button type="submit">送信</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.user = {};
$scope.user.name = "foo";
$scope.user.comment = "bar";
}]);
</script>
</body>
</html>
JSで値を代入している部分は、実際はアプリケーション側でDBまたは同フォームのPOSTからから取得した値を出力（print）しています。
しかし、これでサーバーに送信してもhiddenフィールドの値は空となり取得されませんでした。調べてみると”ng-value”というものを使うという事が分かり、書き直しました。
<input type="hidden" id="comment" name="comment" ng-value="user.comment">
正常に値を送信して受け取ることが出来ました。
もっとも今なら単にフォームバリデーションするだけであればHTML5の機能を使うのが楽かもしれません。ブラウザによって表示のされ方とか挙動が微妙に違いますけども、それが許容範囲であれば出来るだけ楽したいですね。
