Question

如何以角度验证表单？因为我有以下表格，使用https://github.com/danialfarid/ng-file-upload所有字段都是必需的。

问题是，当我点击提交时，它显示一个提示，说该字段是必需的，但表单已提交。我想停止提交，除非填写了所有字段。

如何让用户只选择配置文件输入中的图像？因为虽然我添加ng-accept="image/*"不起作用

<form enctype="multipart/form-data" method="post" >
 <input type="text" ng-model="name" required>
 <input type="text" ng-model="age" required>
 <input type="text" ng-model="title" required> 
 <input type="file" name="profile_pic" ng-file-select="onFileSelect" required>
 <input type="file" name="document" ng-file-select="onFileSelect2" required>
 <input type='button' ng-click='onFormSubmit(onFileSelect,onFileSelect)' value='Submit'>
</form>

角

angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function(file) {

Upload.upload({
    url: 'api/upload-data.php', 
    method: 'POST',
    file: file,
    data: {
        'name': $scope.name,
        'age' : $scope.age ,
        'title' : $scope.title ,


    }
})

  };
}];

Answer 1

在表单中添加一个名称（以便您可以引用它），将表单上的ng-click按钮更改为ng-submit，然后将提交更改为按钮元素，类型为“submit”+ ng-如果表单无效，则禁用

<form name="myForm" enctype="multipart/form-data" method="post" ng-submit="onFormSubmit(onFileSelect,onFileSelect)" >
    <input type="text" ng-model="name" required>
    <input type="text" ng-model="age" required>
    <input type="text" ng-model="title" required> 
    <input type="file" name="profile_pic" ng-file-select="onFileSelect" required>
    <input type="file" name="document" ng-file-select="onFileSelect2" required>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

除非填写所有字段，否则请停止提交表单

1 个答案: