入力フォームをAngularJSを用いて実装した際に困ったことを紹介します。
必須入力と表示非表示
以下のような入力フォームを構成するhtmlと、ボタンが押されると呼び出されるfunctionを定義しました。
sample.html
<!DOCTYPE html>
<html ng-app='App'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
<title>test</title>
</head>
<body ng-controller="AppController">
<form name="form" ng-submit="hoge()">
<input type="text" ng-show="true" required>
<input type="text" ng-show="false" required>
<button type="submit" >send</button>
</form>
</body>
</html>
sample.js
var app = angular.module('App', []);
app.controller('AppController', function($scope){
$scope.hoge = function(){
console.log('hoge is called');
}
});
するとこんな感じに。ng-show="false"を指定しているinputは表示されません。またそれぞれのinput要素でrequiredによる必須入力を指定しています。
フォームに適当な文字を入力し、sendボタンを押すと、上で定義したfunctionが実行されるはず...だと思ったのですが、実行されず。ng-show="false"を指定しているinputのrequiredが効いてしまっています。
次に同様な機能のディレクティブ、ng-ifを使ってみます。先ほどのinput要素を以下のように書き換えます。
<input type="text" ng-if="true" required>
<input type="text" ng-if="false" required>
先ほど同様な見た目になり、文字を入力しsendを押すと、functionが実行されログが出力されます。
ng-if・ng-show/hideの違い
先ほどの事象が起きるまでng-if、ng-showの違いを理解していませんでしたが、調べると次のような違いがあります。
- ng-if：DOMの追加と削除
- ng-show/hide : CSSによる表示非表示切り替え
したがって、ng-show="false"を指定しただけではDOMとして要素が存在しておりrequiredが効く状態になっていました。
必須入力を評価できるディレクティブ：ng-required
必須入力を動的に変化させたい場合、ng-requiredというディレクティブを使うことで実現できます。イコールで評価式（true,false）を指定すると、trueの評価のときだけ必須入力となります。