24

HTML:

<form name="form">
    <input type="file" ng-model="document" valid-file required>
    <input type="submit" value="{{ !form.$valid && 'invalid' || 'valid' }}">
</form>

input[type=file] の変更をリッスンするカスタム ディレクティブ:

myApp.directive('validFile',function(){
    return {
        require:'ngModel',
        link:function(scope,el,attrs,ngModel){

            //change event is fired when file is selected
            el.bind('change',function(){
                 scope.$apply(function(){
                     ngModel.$setViewValue(el.val());
                     ngModel.$render();
                 });
            });
        }
    };
});

ファイルを選択すると、コンソールに次のエラーが表示されます。

エラー: InvalidStateError: DOM Exception 11 エラー: 使用できない、または使用できなくなったオブジェクトを使用しようとしました。

plunkr で試してみてください: http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview

ディレクティブがないと、入力ファイル フィールドの状態が form.$valid にプッシュされません。このエラーが発生する理由と、これを修正する方法はありますか?

4

2 に答える 2

4

AngularJS 1.2.x に更新した後、スニペットが正しく機能していないように見え、ファイル入力が選択したファイル値に固執せず、フォームが使用できなくなります。ディレクティブを元のものに戻し、それを削除するngModel.$render()と、魅力のように見えます。

.directive('validFile', function () {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, el, attrs, ngModel) {
      el.bind('change', function () {
        scope.$apply(function () {
          ngModel.$setViewValue(el.val());
        });
      });
    }
  };
于 2013-11-26T02:38:48.533 に答える