通过 NG 单击选择文件或文本区域数据

select either file or textarea data with ng-click

本文关键字：文本 区域 数据 文件 NG 单击 选择 通过      更新时间：2023-09-26

我想选择文件或输入的数据。 我需要验证这一点，但我失败了。 它必须是文件或文本数据，只需单击按钮即可。 请帮助我解决这个问题，提前谢谢。JSFiddle

我需要如果用户同时输入文件和文本区域文本，它会显示错误。 用户必须仅选择"文件"或"文本区域"。 这是我的要求

.HTML： 

<form name="form" ng-app="app" ng-controller="Ctrl" >
  Upload file: <input type="file" id="file" /><br/><br/>
  Enter text: <textarea id="textarea" required></textarea>
  <br/><br/>
  <button type="submit" class="btn btn-primary btn-large" ng-click="submitForm()">Submit</button>
</form>

.JS：

var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
    $scope.submitForm = function(){
    alert("hi");
    var string1 = document.getElementById('file').value;
    var string2 =document.getElementById('textarea').value;
    if (string1 == string2) {
        return true;
    }
    else {
        return false;
    }
  }
});

没有办法获取带有ng-model的文件名，因为它不适用于type=file。

要实现您想要的，您必须创建一个指令，如下面的链接所示：https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

之后，您必须将 file-model 指令分配给输入，告诉$scope的哪个变量将与该值双向绑定。

文本区域数据可以用ng模型实现。

JSFiddle

单击文件输入后，请禁用文本区域字段，如果您没有任何要上传的文件，则可以单击文本区域字段并单击文本区域禁用文件输入

如果它是

非此即彼的条件，则不能在两个输入上使用 required。

我在这里创建了一个应该适合您的代码笔：

http://codepen.io/anon/pen/XdYBWp

代码如下：

.HTML

    <form name="form" ng-app="app" ng-controller="Ctrl as ctrl">
        Upload file:
       <input type="file" id="file" ng-model="ctrl.file" />
     <br/>
     <br/> Enter text:
     <textarea id="textarea" ng-model="ctrl.text"></textarea>
     <br/>
     <br/>
     <button class="btn btn-primary btn-large" ng-click="ctrl.submitForm()">Submit</button>
      </form>

JavaScript angular.module（'app'， []）.controller（'Ctrl'， function（） {

      var vm = this;
      vm.file = ""
      vm.text = ""
      vm.submitForm = function() {
      // angular doesn't update the model for input type="file"
      vm.file = document.getElementById('file').value;
      var retVal = false ;
      if (vm.file && ! vm.text) 
            {retVal = true}
      else if (vm.text && ! vm.file) 
          {retVal = true}
      else if (!vm.text && !vm.file) 
          {retVal = false}
      else if (vm.text && vm.file) 
            {retVal = false}
      if (!retVal) {
          alert("Please specify either a file or text, not both!")
      } else
            alert("ok")
      }
      });

您可能可以将所有 ifs 和else ifs 组合成一个表达式，但它的可读性不是很强 IMO。

相关文章：