ng-file-upload file.$valid не определен

Я пытаюсь реализовать загрузку файлов с помощью Angular [ng-file-upload[(https://github.com/danialfarid/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>

person Daniel Bonnell    schedule 28.08.2015    source источник
comment
Какая у вас ошибка?   -  person Marcelo    schedule 28.08.2015
comment
Я не получаю никаких ошибок.   -  person Daniel Bonnell    schedule 28.08.2015
comment
в документах не совсем понятно, что делает $valid ): Вы пробовали использовать $file.$error? Он также показывает ошибки проверки, поэтому, если он выходит, файл недействителен.   -  person Marcelo    schedule 28.08.2015
comment
Да, документов по $valid явно не хватает. Я понял проблему (я думаю). Я звонил $valid postQuestionAttributes, хотя на самом деле должен был звонить $scope.form.postQuestionForm.   -  person Daniel Bonnell    schedule 28.08.2015


Ответы (2)


$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);
    }
};
person danial    schedule 29.08.2015

объект формы — это map , где поля — это ключи с результатом проверки, поэтому, чтобы проверить, является ли отдельный ввод, например name="image" действительным, вы должны сделать следующее:

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

вот небольшой пример jsfiddle: https://jsfiddle.net/nran9uhh/2/

person Davit Tvildiani    schedule 28.08.2015
comment
Я пробовал это, но это не имело никакого эффекта. Я все еще получаю undefined, когда звоню image.$valid - person Daniel Bonnell; 28.08.2015