【问题标题】:submit button not getting invoked - AngularJs提交按钮没有被调用 - AngularJs
【发布时间】:2017-05-17 11:01:54
【问题描述】:

我有一个包含多个控件的表单,我在其中设置了必填字段验证。如果数据正确,我想调用提交按钮。但即使所有数据都已填写,并单击提交按钮,该按钮也不会被调用。下面是使用的示例代码:

  <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">

  <div class="container" ng-show="createMenu">
                <br />
                <div class="row">
                    <div>
                        <label>Test:</label>
                    </div>
                    <div >
                        <select name="testTypeSelect" required ng-model="selectedtestType" ng-options="test.TestTypeName for test in tests" ng-change="updateImageUrl(selectedTestType)">
                            <option value="">-- Select the test --</option>
                        </select>
                    </div>
                </div>
                <span style="color:red" ng-show="submitted == true && mainForm.testTypeSelect.$error.required"> Type is required</span>

                <div class="row">
                    <div >
                        <label>Name :</label>
                    </div>
                    <div>
                        <input type="text" required ng-model="testName" name="testName" />
                    </div>
                </div>

 <input type="submit" value="Submit" ng-click="submitted=true" /> 

//在controller.js中

 $scope.add = function () {

        $scope.init();   

        alert("hi");
            $scope.addData();

    };

如何解决这个问题? 谢谢

【问题讨论】:

  • 可能是表格无效。您提出了一个条件,尝试在表单标记的 ng-submit 中删除 mainForm.$valid。如果您希望表单有效,请输入有效数据
  • 使用 Angular 检查器查看表单的 $valid 属性
  • 可以加plunkr吗?

标签: angularjs


【解决方案1】:

你的控制器在表单标签之后被注入,add() 函数调用不在控制器注入中。

<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">

改成

<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>

【讨论】:

  • 试过了..同样的问题存在
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-12-22
  • 2019-01-03
  • 2011-03-05
  • 1970-01-01
  • 2016-10-11
  • 2017-03-13
  • 1970-01-01
相关资源
最近更新 更多