ng-file-upload file. $ Valid is undefined

Question

Я пытаюсь реализовать загрузку файлов с помощью директивы 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> 

Answer 1

$ действителен для элемента формы, а не файла, поэтому у вас может быть $scope.form.image.$valid, но сам файл будет иметь только $error, относящийся к этому отдельному файлу. Итак, в вашем кошельке отправьте код для $scope.postQuestionForm.image.$valid вместо image.$valid.

Но все они, кажется, избыточные проверки так в вашем проверке обоснованности самой формы случая, который будет означать, что все элементы в виде ГОДНА будет достаточно:

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

Answer 2

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

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

здесь маленький пример jsfiddle: https://jsfiddle.net/nran9uhh/2/