何年やってても、Formの値をちゃんと取得するには苦労するな。。。
簡単な例
各フォームの値を設定、取得してAlertで表示
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//init
$scope.user = {};
$scope.user.gender = "man";
$scope.user.adult = true;
//array for option
$scope.years = [2001,2002,2003];
//function
$scope.addUser = function(){
alert(JSON.stringify($scope.user));
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form novalidate name="myForm" ng-submit="addUser()">
<!-- text -->
<p>
Name:<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="10">
<span ng-show="myForm.name.$error.required">required</span>
<span ng-show="myForm.name.$error.minlength">too short</span>
<span ng-show="myForm.name.$error.maxlength">too long</span>
</p>
<!-- number -->
<p>
Age:<input type="number" name="age" ng-model="user.age">
<span ng-show="myForm.age.$error.number">Not valid number</span>
</p>
<!-- email -->
<p>
Email:<input type="email" name="email" ng-model="user.email">
<span ng-show="myForm.email.$error.email">Not valid email</span>
</p>
<!-- checkbox -->
<!-- <p>18歳以上ですか？<input type="checkbox" ng-model="user.adult" ng-init="user.adult=true"></p> -->
<p>18歳以上ですか？<input type="checkbox" ng-model="user.adult"></p>
<!-- radiobutton -->
<p>
Gender:
<input type="radio" ng-model="user.gender" value="man">man
<input type="radio" ng-model="user.gender" value="woman">woman
</p>
<!-- select -->
<p>
BirthYear:
<select ng-model="user.year" ng-options="year for year in years">
<option value="">選択してください</option>
</select>
</p>
<!-- submit -->
<p><input type="submit" value="add"></p>
<pre>{{user|json}}</pre>
</form>
</body>
</html>
備忘
- 配列に入れたい場合は、配列自体を初期化しておかないと$scope.usr.name = "hoge"とはできない。
- コントローラで初期値を設定する場合は、valueを設定する。
- HTML側だとng-init等を使う。
- select等で取得できる値は（標準では）valueではない
その他
ボタンのdisabled
formの場合、formname.$invalidで全体の評価のtrue,falseが取れる。なので、全部のバリデーションがtrueになるまで、ボタンをenableにしないというようなことが複雑なAND条件等を書かなくてもできる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.addUser = function(){
alert("added");
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form novalidate name="myForm" ng-submit="addUser()">
<!-- text -->
<p>
Name:<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$error.required">name required.</span>
</p>
<p>
NickName:<input type="text" name="nickname" ng-model="nickname" required>
<span ng-show="myForm.nickname.$error.required">nickname required.</span>
</p>
<!-- submit -->
<p><input type="submit" value="add" ng-disabled="myForm.$invalid"></p>
<pre>{{myForm.name.$error|json}}</pre>
</form>
</body>
</html>