Question

我正在验证＆amp;使用angularjs提交一个简单的表单，表单似乎做了一些初始验证，但提交按钮不记录或执行为其定义的角度函数。我做错了什么？

主app.js

var quora=angular.module("quora-app",['q-controller-1','ngRoute']);
quora.config(function ($routeProvider) {
    $routeProvider
        .when('/edit',{
            templateUrl:'../resources/views/forms/edit.blade.php',
            controller:'q-master-1'
        });
});

控制器

angular.module("q-controller-1",[])
    .controller("q-master-1",['$scope',function ($scope) {
        $scope.update=function(value,text) {
            $scope.id=value;
            $scope.putText=text;
        }
        $scope.validate=function(updateInfo) {
            console.log(updateInfo);
            if($scope.update.$valid) {
                $scope.test1=$scope.id
                $scope.test2=$scope.updateInfo.qText
            }
            else
                console.log("no")
        }
    }]);

edit.blade.php

<form name="update" method="POST" action="edit.blade.php" ng-submit="validate(updateInfo);" onsubmit="return false;" >
    <b ng-show="update.question.$dirty && update.question.$error.required">Invalid</b>
    <input type="text" name="question" ng-required="true" ng-minlength="3" ng-value="putText" ng-model="updateInfo.qText">
    <input type="submit" name="submit" value="Update" ng-show="update.$valid">
</form>

执行启动的文件

@{{ test1 }}
@{{ test2 }}
@section('list-questions-answers')
    <div ng-view></div>
    <ul>
        @foreach($listQuestionsAnswers as $q)
            <li>
                <a href="{{url('/questions/'.$q->question_id)}}">{{ $q->question }}</a>
                Options: <a href="#edit" ng-click="update({{ $q->question_id }},'{{ $q->question }}')">Edit</a>
            </li>
            @foreach($q->answers as $a)
                <ul>
                    <li>{{ $a->answer }}</li>
                </ul>
            @endforeach
        @endforeach
    </ul>
@endsection

正在加载ng-view，但提交按钮无效或正在记录任何内容！

Answer 1

正如评论中所提到的，问题在于表单标记中的action属性，因为它与本机表单配合得很好，但在使用Angular时，行为并不符合。

由于angular尝试调用ng-submit函数，但action方法正在尝试处理请求URL。

替代方法：

取而代之的是删除ng-submit和on submit，action post以及所有这些，只需将ng-click添加到提交按钮并使用ng-disabled禁用提交按钮，直到表单有效。

angularjs提交按钮不起作用

1 个答案: