angular 重复表单指令无效 editStoryForm 未定义

Question

我有一个指令可以创建一个包含一组输入的表单。该指令在页面上重复多次。当我的 submit 函数被触发时，我无法对表单进行运行验证，因为 editStoryForm 未定义。如何解决这个问题？

我在这里发现的大多数问题都涉及对重复表单输入而不是重复表单的验证。此外，我已经尝试将 $element 注入到我的指令中，以便我可以像 this answer 所建议的那样访问我的表单对象，但是当我注入 $element 时它是未定义的。

这是我的指令：

app.directive('story', ['$http', 'modal', function($http, modal) {
    return {
        replace: true,
        templateUrl: '/assets/story.html',
        transclude: false,
        scope: {
            story: '=',
            token: '@'
        },
        controller: ['$scope', '$http', 'modal', function($scope, $http, modal) {
            $scope.editStory = {
                token: $scope.token,
                id: $scope.story.id,
                title: $scope.story.title,
                published: $scope.story.published,
                file: undefined,
                questions_attributes: $scope.story.questions
            };

            $scope.submit = function(result) {
                debugger;
                if (result && $scope.editStoryForm.$valid) {
                    $http.put('/stories/' + result.id + '.json', {
                        workplace_story: result
                    }).progress(function(){
                        $scope.progress = true;
                    }).success(function(data, status, headers, config) {
                        $scope.progress = false;
                    });
                };
            };
        }]
    }
}]);

模板

<form accept-charset="UTF-8" name="editStoryForm" ng-submit="submit(editStory);" multipart="true" novalidate>
<div class="row">
    <div class="col-lg-8" style="height: 285px;overflow:hidden;overflow-y:scroll;">
        <input name="authenticity_token" type="hidden" ng-model="editStory.token">

        <div class="form-group">
            <label>Title</label>
            <input ng-disabled="story.responses.length > 0" type="text" class="form-control" name="title" ng-model="editStory.title" required>
        </div>

        <div class="form-group">
            <label>Questions</label>
            <div ng-repeat="q in editStory.questions_attributes">
                <div ng-hide="question._destroy" class="row form-group">
                    <div class="col-lg-10">
                        <input ng-disabled="story.responses.length > 0" type="text" class="form-control" ng-model="editStory.questions_attributes[$index]['question']" placeholder="What is the meaning of life, the universe, and everything?"/>
                    </div>
                    <div class="col-lg-2">
                        <a ng-if="!story.responses.length > 0" ng-click="removeQuestion($index)" class="btn btn-xs btn-danger">X</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

$scope.editStoryForm 未在您的控制器中定义。如果您检查您的表单是否有效，请在 ng-submit 方法中传递表单名称。喜欢：

在控制器中：

                $scope.submit = function(editStoryForm, result) {
                debugger;
                if (result && editStoryForm.$valid) {
                    $http.put('/stories/' + result.id + '.json', {
                        workplace_story: result
                    }).progress(function(){
                        $scope.progress = true;
                    }).success(function(data, status, headers, config) {
                        $scope.progress = false;
                    });
                };
            };

在 HTML 中：

<form accept-charset="UTF-8" name="editStoryForm" ng-submit="submit(editStoryForm, editStory);" multipart="true" novalidate>

angular 重复表单指令无效 editStoryForm 未定义

angular repeat form directive not working editStoryForm is not defined

angularjs

angularjs-ng-repeat

angular-directive