Angular 1 个动态表单对象

Question

我正在使用 Angular 1 并创建一个动态表单。它通过循环一些对象并呈现动态绑定的输入字段来工作，例如：

<div class="quest-form form-group" ng-repeat="task in tasks">   
    <div ng-if="task.Class == 'TaskText'" ng-class="'task ' + task.Class">          
        <input ng-model="questForm.Task[task.ID].Value" ng-name="task_{{task.ID}}" ng-required="task.Required == 1" type="text" class="form-control" placeholder="{{task.Title}}"  />
    </div>
    ...
    ...
</div>

我在循环中还有一个上传字段：

<div ng-if="task.Class == 'TaskUpload'" ng-class="'task ' + task.Class">
    <input class="btn btn-primary upload-btn" ngf-max-size="10MB" type="file" ng-model="upload" ngf-multiple="false" ngf-select="uploadFile(upload, task.ID, $invalidFiles)" />
    <input class="" ng-model="questForm.Task[task.ID].FileUploadID" ng-required="task.Required == 1" ng-name="task_{{task.ID}}" type="text" />
</div>

当调用文件上传事件时，我正在尝试设置隐藏字段的值，即 ng-model="questForm.Task[task.ID].FileUploadID"，如下所示：

$scope.uploadFile = function(file,taskID) {
    file.upload = Upload.upload({
        url: assetsURL+'/home/UploadFile',
        data: {file: file}
    });
    file.upload.then(function (response) {
        $scope.questForm.Task[taskID].FileUploadID = response.data; // THIS MESSES UP
    }, function (response) {
        ...
    });
};

我收到以下错误，好像 $scope.questForm.Task[128] 不存在，即使隐藏输入看起来正确并且绑定到 $scope.questForm.Task[128].

angular.js:14362 TypeError: Cannot read property '128' of undefined
at file.upload.then.$scope.errorMsg (http://localhost/carl-mygps-app/js/controllers/quest-details-controller.js:120:26)
at processQueue (http://localhost/carl-mygps-app/bower_components/angular/angular.js:16689:37)
at http://localhost/carl-mygps-app/bower_components/angular/angular.js:16733:27
at Scope.$eval (http://localhost/carl-mygps-app/bower_components/angular/angular.js:18017:28)
at Scope.$digest (http://localhost/carl-mygps-app/bower_components/angular/angular.js:17827:31)
at Scope.$apply (http://localhost/carl-mygps-app/bower_components/angular/angular.js:18125:24)
at done (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12233:47)
at completeRequest (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12459:7)
at XMLHttpRequest.requestLoaded (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12387:9) Possibly unhandled rejection: {}

我试过在以下范围内定义空白对象：

$scope.questForm = [];
$scope.questForm.Task = {};

但我不需要，因为它们是在模板中创建的？使困惑。谢谢大家

Answer 1

其实没有。编译模板并不意味着所有 ng-model 都已初始化。虽然 ng-model 足够聪明，可以创建所有中间对象，但如果它们不存在，它不会创建，直到 $viewValue 被更改。在你的情况下，如果你上传一个文件而不先编辑任何其他输入，输入的 $viewValue 永远不会改变，因此你必须初始化 questForm、questForm.Task 和 questForm.Task[taksID]你自己。

if (!$scope.questForm) {
  $scope.questForm = {};
}
if (!$scope.questForm.Task) {
  $scope.questForm.Task = {};
}
if (!$scope.questForm.Task[taskID]) {
  $scope.questForm.Task[taskID] = {};
}
$scope.questForm.Task[taskID].FileUploadID = response.data;

或者你可以在开头初始化questForm和questForm.Task。并且只在初始化之前检查 questForm.Task[taskID] 是否存在。

Angular 1 个动态表单对象

Angular 1 dynamic form object

arrays

angularjs

angularjs-directive

angularjs-model

angularjs-bindings