AngularJSでほんの少しだけ複雑な必須入力にしてみる

AngularJSのリファレンス本でサラっと
「ng-requiredは値の評価により動的に必須チェックの付け外しが可能」
とだけ書いてあるけど、それ以上の説明とサンプルが見当たらず、ググっても情報が少なかったので確かめてみました。

ラジオボタンの選択値によって必須かどうか動的に変更させる

例えば、こんな入力フォーム。

上のラジオボタン「平日」が選択されている場合はテキストボックスは必須ではないけど、下のラジオボタンが選択された場合には、テキストボックスを必須入力にしたい。みたいな条件付き必須入力というケースはよくあるかと思います。
これはng-requiredを使うことで、HTMLのみで必須入力を動的に変更出来ます。

sample.html

<form name='myForm'>
  <div>
    <input type="radio" name="interval" value="w1" ng-model="hoge.interval">平日
  </div>
  <div>
    <input type="radio" name="interval" value="w2" ng-model="hoge.interval">
    <input type="text" name="days" 
           ng-model="hoge.interval_days"
           ng-required="hoge.interval==='w2'">日ごと
  </div>
</form>
<p ng-show="myForm.days.$error.required">何日ごとか入力してぽよ</p>

required と ng-required の違い

required：
必ず必須入力。

ng-required：
評価式を挿入できて、その結果（trueかfalseか）によって必須入力を変更する。
ng-required="true" とするとrequiredを記述したのと同じになる。

つまり、このような条件付き必須入力にしたい場合には、ng-requiredは有用なディレクティブです。