Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs ng文件上载文件。$valid未定义_Angularjs_Ng File Upload - Fatal编程技术网

Angularjs ng文件上载文件。$valid未定义

Angularjs ng文件上载文件。$valid未定义,angularjs,ng-file-upload,Angularjs,Ng File Upload,我尝试使用Angular[ng file upload[()指令实现文件上传。我尽可能地遵循文档。我希望用户能够填写表单、附加图像并点击提交按钮。当这种情况发生时,我希望将文件和表单输入字段作为json发送到服务器 当我运行我的检查以查看image.$valid是否为真时,我得到一个错误```。我不确定这里缺少了什么 这是我的控制器: var app = angular.module('myApp', ['ngAnimate','ui.bootstrap', 'ngFileUpload']);

我尝试使用Angular[ng file upload[()指令实现文件上传。我尽可能地遵循文档。我希望用户能够填写表单、附加图像并点击提交按钮。当这种情况发生时,我希望将文件和表单输入字段作为json发送到服务器

当我运行我的检查以查看
image.$valid
是否为真时,我得到一个错误```。我不确定这里缺少了什么

这是我的控制器:

var app = angular.module('myApp', ['ngAnimate','ui.bootstrap', 'ngFileUpload']);

app.controller('NewPostQuestionCtrl', ['$scope', '$http', 'Upload', function($scope, $http, Upload) {
    $scope.image = {};
    $scope.form = {};
    $scope.postQuestion = {
        token: $scope.token,
        employer_id: $scope.employer_id,
        question: $scope.question,
        published: $scope.published
    };

    $scope.submit = function(postQuestionAttributes, image) {
        console.log(postQuestionAttributes.$valid)
        console.log(image.$valid)
        if (image && image.$valid && !image.$error && postQuestionAttributes.$valid) {
            $scope.upload(image, postQuestionAttributes);
        }
    };

    $scope.upload = function(file, postQuestionAttributes) {
        Upload.upload({
            url: 'cms/posts',
            fields: postQuestionAttributes,
            file: image
        }).progress(function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
        }).success(function (data, status, headers, config) {
            console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
        }).error(function (data, status, headers, config) {
            console.log('error status: ' + status);
        })
    };
}]);
这是我的表格:

<form accept-charset="UTF-8" name="form.postQuestionForm" ng-submit="submit(postQuestion, image)" class="new_post_item" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="postQuestion.token" ng-init="postQuestion.token='<%= form_authenticity_token %>'">
    <input name="employer_id" type="hidden" ng-model="postQuestion.employer_id" ng-init="postQuestion.employer_id='<%= current_employer.id %>'">

    <div class="form-group">
        <label>Question</label>
        <textarea class="question-textbox" name="question" ng-model="postQuestion.question" required></textarea>
    </div>

    <div class="form-group">
        <label>Image</label>
        <div class="button" ngf-select ng-model="image" name="image" ngf-pattern="image/*" accept="image/*" ngf-max-size="150KB" required>Select</div>
    </div>

    <div class="form-group">
        <label>Publish Question</label>
        <select class="" name="published" ng-model="postQuestion.published" required>
            <option value="true">Publish</option>
            <option value="false">Don't Publish</option>
        </select>
    </div>

    <input class="submit-btn" name="commit" type="submit" value="Publish Post" ng-disabled="form.postQuestion.$invalid">
</form>

问题:
形象
挑选
发表问题
发表
不发表

表单对象是map,其中字段是带有验证结果的键,因此要检查name=“image”等单个输入是否有效,必须执行以下操作:

var is_valid = form.postQuestionForm["image"].$valid;

下面是一个小的JSFIDLE示例:

$valid用于表单元素而不是文件,因此您可以使用
$scope.form.image.$valid
,但文件本身只会包含与该单个文件相关的
$error
。 因此,在提交代码时,请检查
$scope.postQuestionForm.image.$valid
而不是
image.$valid

但它们似乎都是多余的检查,因此在您的情况下,检查表单本身的有效性就足够了,这意味着表单中的所有元素都是有效的:

$scope.submit = function(postQuestionAttributes, image) {
    if ($scope.postQuestionForm.$valid) {
        $scope.upload(image, postQuestionAttributes);
    }
};

你发现了什么错误?我没有发现任何错误。文档不太清楚
$valid
的作用:你是否尝试过使用
$file.$error
?它也显示验证错误,因此如果退出该文件,则无效。是的,
$valid
上的文档肯定缺少。我发现了问题(我想)。我在
postQuestionAttributes
上调用
$valid
,而我真的应该在
$scope.form.postQuestionForm
上调用它。我尝试了,但没有任何效果。当我调用
图像时,我仍然得到
未定义的
。$valid