文件名不會在表格後被清除$ setPristine用於文件上傳的自定義角度指令

我正在使用angular 1.5.8。在遵循一些資源之後，我得到了文件上傳的工作。我必須爲此創建一個自定義指令。

指令

//file-upload-model-directive.js 
'use strict'; 

export default function (app) { 

    app.directive('fileUploadModel', fileUploadModelDirective); 

    function fileUploadModelDirective() { 
     'ngInject'; 

     return { 
      restrict: 'A', 
      link: linkFn, 
      require: 'ngModel' 
     }; 

     function linkFn (scope, element, attrs, ngModel) { 
      element.bind('change', function(event){ 
      var files = event.target.files; 
      var file = files[0]; 

      ngModel.$setViewValue(file); 
      scope.$apply(); 
      }); 

     } 
    } 
}

我也採用了棱角分明的form。我在這個表單上有一個「重置」按鈕。點擊時我想清除所有表單域。除了file之外，它會發生在所有表單字段中。

查看

<form ng-submit="dataCtrl.upload(form)" name="form"> 
    <div class="form-group" ng-class="{'has-error' : form.file.$invalid && !form.file.$pristine}"> 
    <label>Select file</label> 
    <input type="file" name="file" ng-model="dataCtrl.newUpload.csvFile" file-upload-model required/> 
    </div> 

    <div class="form-group" ng-class="{'has-error' : form.comment.$invalid && !form.comment.$pristine}"> 
    <label>Comment</label> 
    <textarea class="form-control" name="comment" 
     ng-model="dataCtrl.newUpload.comment" required></textarea> 
    </div> 

    <div class="form-group pull-right"> 
    <button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Upload</button> 
    <button class="btn btn-default" ng-click="dataCtrl.reset(form)" ng-disabled="!form.$dirty">Reset</button> 
    </div> 
</form>

和控制器

'use strict'; 

function DataController($log, catalogCnst, requestSV, $http) { 
    'ngInject'; 

    this.reset = function(form) { 
    this.newUpload = {}; 
    // form.file.$setViewValue(null); // this didn't work either 
    form.$setPristine() 
    }; 

    this.upload = function(form) { 
    // some code 
    }; 
}

當「復位」被點擊時，我看到

form.file.$pristine is false 
form.file.$invalid is false

但我還是看近的文件名文件上傳元素。

我也嘗試添加的手錶，並在指令

scope.$watch(attrs.fileUploadModel, function(value) { 
    console.log('attrs.file'); 
}); 

element.on('$pristine', function() { 
    console.log('destroy'); 
});

處理元素上的活動，但並沒有被調用。

我該怎麼做？請指導我。

來源

2016-11-06 Hussain

當您清除newUpload時，文件輸入不會被清除。你需要單獨做這件事。

見JSFiddle：

基本上，我加入到指令scope：

scope: { 
    model: '=ngModel' 
},

...和watch：

scope.$watch('model', function(file) { 
    if (!file) { 
    element.val(''); 
    } 
});

來源

2016-11-06 12:52:44 masa

工作完美！我不知道我的$ watch有什麼問題。說，如果我在看attrs – Hussain

'attrs.fileUploadModel'只是指'input'元素中的'file-upload-model'屬性。它始終是一個空字符串。 – masa

而不是使用按鈕標籤，爲什麼不使用輸入標籤。理論上這可能會起作用。

<input type="submit" class="btn btn-success" ng-disabled="form.$invalid" value="Upload"> 
<input type="reset" class="btn btn-default" ng-click="dataCtrl.reset(form)" ng-disabled="!form.$dirty" value="Reset">

來源

2016-11-06 12:47:04

這將清除的文件名。但重置不會將窗體設置爲$無效爲true。所以即使我的表單被重置後，上傳按鈕仍然處於活動狀態。 – Hussain

文件名不會在表格後被清除$ setPristine用於文件上傳的自定義角度指令

回答

相關問題