AngularJSで入力欄がdisabledになったら設定したモデルの値をクリアする方法

Web入力フォームを作成するときに、入力内容の条件によって入力欄(inputやselectなど)のdisabledを切り替えることはよくあると思います。入力欄がdisabledになると、それらの項目はsubmitしたときの送信パラメータに含まれなくなります。そのおかげで不整合なデータが送信されることを防止することができます。

ところがAngularJSにおいて入力欄にngModelで割り当てたモデルを利用している場合は、入力した後にdisabledになってもモデルの値は残ってしまいます。そのため、非活性の項目なのに値が存在するという不整合が起きてしまうことがあります。

そこで、入力欄がdisabledになるとモデルの値をクリアするディレクティブを作ってみましました。

app.js

app.directive('clearDisabled', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ngModel) {
      scope.$watch(attrs.ngDisabled, function(isDisabled) {
        if (isDisabled) {
          ngModel.$setViewValue(); // clear value
          ngModel.$setPristine();
          ngModel.$render();
        }
      });
    }
  };
});

index.html

<h2>使用例</h2>
<form ng-controller="AppController">
  <input type="text" ng-model="data.text" ng-disabled="data.isCheck" clear-disabled />
  <input type="checkbox" ng-model="data.isCheck" value="1"/>
  <div>
   {{data}}
  </div>
</form>

この例では、チェックボックスにチェックを付けるとテキスト欄が非活性になります。それに合わせて入力欄に割り当てたモデル data.text の値がクリアされます。

実際の動作はこちらから (http://jsfiddle.net/s7mgL408/4/)