angularjs提交按钮不起作用

Posted 2023-05-09

【中文标题】angularjs提交按钮不起作用

【英文标题】：angularjs submit button not working

【发布时间】：2017-03-13 06:52:23

【问题描述】：

我正在使用 angularjs 验证并提交一个简单的表单，该表单似乎进行了一些初始验证，但提交按钮没有记录或执行为其定义的 angular 函数。我做错了什么？

主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 正在加载，但提交按钮不起作用或记录任何内容！

【问题讨论】：

尝试删除 onsumbit 属性！

那么它会像普通表单一样提交，这是没有用的！

你可以做一件事，不要采用原生方法。而是删除 ng-submit 和 on submit ， action post 和所有这些，只需将 ng-click 添加到提交按钮并使用 ng-disabled 禁用提交按钮，直到表单像您现在所做的那样有效

我怀疑罪魁祸首是你的动作属性，它试图在 Angular 上下文之外进行后调用，尝试删除在使用 Angular 时不需要这些原生的东西

成功了吗？你做了什么改变？

【参考方案1】：

正如 cmets 中所述，问题在于表单标签中的 action 属性，因为它适用于原生表单，但在使用 Angular 时，该行为不符合要求。

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

替代方法：

改为删除 ng-submit 和 on submit ， action post 和所有这些，只需将 ng-click 添加到提交按钮并使用 ng-disabled 禁用提交按钮，直到表单有效。

【讨论】：

@Jaskaran 你能接受这个作为答案吗，它也会帮助别人！