在AngularJS中添加简单的验证以形成文件上传 [英] Add simple validate to form file upload in AngularJS

问题描述

我有一个AngularJS表单，其内容被发送到nodemailer后端。这工作得很好，使用下面的指令来添加一个文件上传组件到表单：

  .directive（'fileModel'， ['$ parse'，function（$ parse）{
 return {
 restrict：'A'，
 link：function（scope，element，attrs）{
 var model = $ parse（attrs.fileModel）; 
 var modelSetter = model.assign; 
 
 element.bind（'change'，function（）{$ b $ scope。$ apply（function（ ）{
 modelSetter（scope，element [0] .files [0]）; 
}）; 
}）; 
} 
}; 
但是，我需要添加验证，以便提交按钮被禁用，直到一个文件已被选中。我假设表单看起来像这样： 
 
 
 < div class ='form-group'> 
 <！ -  FILE UPLOAD  - > 
  class =form-controlaccept =application / pdf，application / msword，text /平原/> 
<！ - 提交按钮 - > 
'按钮类型='submit'name ='submit'class ='btn btn-primary'
 ng-disabled ='userForm。$ invalid'value ='Send'
 ng- click ='uploadFile（）'>提交< / button> 
< / div> 
  
据我所知，标准的'required'不适用于文件模型，我可以找不到正确程序的例子。 
如何修改指令来实现验证？
 
解决方案
使用$ rootScope表示：
 
 
 
在您的主控制器中： 
 
 
 $ rootScope.fileUploaded = false;  
 
  .directive（'fileModel'，['$ parse'，'$ rootScope'，function（$ parse，$ rootScope）{
 return {
 restrict： 'A'，
 link：function（scope，element，attrs）{
 var model = $ parse（attrs.fileModel）; 
 var modelSetter = model.assign; 
 
 element.bind（'change'，function（）{
 scope。$ apply（function（）{
 modelSetter（scope，element [0] .files [0]）; 
 if（element [0] .files [0]）{
 $ rootScope.fileUploaded = true; 
} 
}）; 
}）; 
} 
 $; 
}]）
  
在您的视图中：
 < div class ='form-group'> 
 <！ -  FILE UPLOAD  - > 
  class =form-controlaccept =application / pdf，application / msword，text /平原/> 
<！ - 提交按钮 - > 
 ng-disabled ='！fileUploaded'value ='发送'
 ng-click ='提交'name ='submit'class ='btn btn-primary' 'uploadFile（）' >提交< /按钮> 
< / div> 
  
 
I have an AngularJS form whose contents are sent to a nodemailer backend. This works just fine, using the following directive to add a file upload component to the form:
.directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;

      element.bind('change', function(){
        scope.$apply(function(){
          modelSetter(scope, element[0].files[0]);
        });
      });
    }
  };
}])
However, I need to add validation to this so that the Submit button is disabled until a file has been chosen. I'm presuming the form would look something like this:
<div class='form-group'>
  <!-- FILE UPLOAD -->
  <input type="file" file-model="email.attachment" name="attachment" 
  class="form-control" accept="application/pdf, application/msword, text/plain" />
  <!-- SUBMIT BUTTON -->
  <button  type='submit' name='submit' class='btn btn-primary' 
  ng-disabled = 'userForm.$invalid' value = 'Send' 
  ng-click = 'uploadFile()'>Submit</button>
</div>
I understand that the standard 'required' does not work with the file model, and I can find no examples of the correct procedure. 
How should I modify the directive to implement validation?
解决方案
Use $rootScope for that : 


In your main controller : 

$rootScope.fileUploaded = false;
 .directive('fileModel', ['$parse','$rootScope', function ($parse,$rootScope) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;

      element.bind('change', function(){
        scope.$apply(function(){
          modelSetter(scope, element[0].files[0]);
          if(element[0].files[0]){
          $rootScope.fileUploaded = true;
          }
        });
      });
    }
  };
}])
In your view : 
    <div class='form-group'>
  <!-- FILE UPLOAD -->
  <input type="file" file-model="email.attachment" name="attachment" 
  class="form-control" accept="application/pdf, application/msword, text/plain" />
  <!-- SUBMIT BUTTON -->
  <button  type='submit' name='submit' class='btn btn-primary' 
  ng-disabled = '!fileUploaded' value = 'Send' 
  ng-click = 'uploadFile()'>Submit</button>
</div>


                        
这篇关于在AngularJS中添加简单的验证以形成文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！