我的看法:
<div class="modal" tabindex="-1" role="dialog" ng-controller="LocationController">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title">
Add a Location
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" ng-submit="createLocation()">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Warehouse A, Row 15, Shelf BC1, etc" ng-model="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="warehouse, row, shelf, etc" ng-model="type">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
</div> …我有一个同时具有ng-click和ng-submit的表单.
ng-submit用于提交,而ng-click调用单独的函数,如上传等.
如何确保ng-click不会意外提交表单？
谢谢!
所以,我有一个角度形式,其提交方法被击中两次,我无法弄清楚为什么.我对Angular很新,所以我可能会忽略一些相当简单的事情......
HTML:
<div ng-app="RegistrationApp" ng-controller="RegistrationController">
<form name="accountForm" ng-submit="submitAccount($event, accountForm, account)" novalidate>
// inputs here...
<button type="submit" class="btn btn-success pull-right" ng-disabled="accountForm.$invalid">Submit</button>
</form>
</div>
JS:
var RegistrationApp = angular.module('RegistrationApp', []);
RegistrationApp.controller('RegistrationController', function ($scope) {
$scope.submitAccount = function (evt, form, account) {
console.log('submitAccount() hit');
console.log(evt);
console.log(form);
evt.stopPropagation();
// AJAX code
});
});
控制台窗口:
submitAccount() hit
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
c {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}
submitAccount() hit
o.Event {originalEvent: Event, type: …我有一个使用AngularJS创建的表单元素,其中包含一个提交按钮,我想将此按钮放在此表单之外.我怎么能用Angular做到这一点并让我的表格仍然有效？
例如主要的HTML代码:
<div class="sd-chk-steps" ng-show="!step_03" ng-hide="step_03">
<!-- Panel Address -->
<div id="sd-p-chk-1" class="large-8 columns sd-p-chk">
<div class="cover step_complete" ng-show="step_01" ng-hide="!step_01">
</div>
<sd-panel-address >
<!-- first form -->
</sd-panel-address>
</div>
<!-- /. Panel Address -->
<!-- Panel delivery -->
<div id="sd-p-chk-2" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_01" ng-hide="step_01"></div>
<sd-panel-delivery>
<!-- second form -->
</sd-panel-delivery>
<div class="cover step_complete" ng-show="step_02" ng-hide="!step_02"></div>
</div>
<!-- /. Panel delivery -->
<!-- Panel payment -->
<div id="sd-p-chk-3" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_02" ng-hide="step_02"></div>
<sd-panel-payment>
<!-- third …我正在现有的Web应用程序上实现AngularJS,它需要像没有AngularJS那样的常见HTTP POST.
这似乎比我预期的要困难.页面URL是动态生成的,无法使用PHP进行回显.我尝试使用jQuery修改表单操作,但这似乎也不起作用.
以正常方式提交表格真的不可能吗？这就是我的正常形式:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post">
<input type="text" name="txt">
<input type="submit" name="submit">
</form>
</body>
</html>
这与AngularJS的形式相同:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="txt">
<input type="submit" name="submit">
</form>
</body>
</html>
第一个表单执行常规表单发布,第二个表单不执行.根据http://docs.angularjs.org/api/ng.directive:form这是设计的,我可以在表单中提供"action"参数.将它留空是行不通的,并且使用jQuery修改它似乎也不起作用.
我有一个带有单选按钮的简单表单,它从服务器中提取值并循环遍历它们以提供单选按钮:
<form ng-submit="createSubCategory(subcategory)">
<div ng-repeat="sub_category in event_sub_categories" >
<label class="item item-radio">
<input type="radio" ng-model="subcategory" ng-value="'{{sub_category}}'" >
<div class="radio-content">
<div class="item-content">
{{sub_category}}
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Continue</button>
</div>
</form>
表格完美显示.但是,我按下的单选按钮似乎没有保存.这是createSubCategory方法:
$scope.createSubCategory = function(subcategory){
console.log(subcategory);
}
日志正在显示undefined.填写表格后如何记录子类别？
angularjs angularjs-controller angular-ngmodel ng-submit angularjs-ng-model
我有一个表单,我想在用户点击提交时触发验证.如果验证失败,则显示适当的错误消息.这很有用.
但是,如果验证通过,我希望表单提交具有完整页面重新加载的同步POST请求,就像操作和方法参数设置为正常一样.
如何从AngularJS范围的ng-submit函数触发正常的post动作(不是AJAX)？
我的形式当然看起来基本如下:
<form id="myForm" name="myForm" ng-submit="formAction(this, models)">
...
<input type="submit" value="Submit">
</form>
我能想到的最好的方法是用另一个隐藏的形式来反映表单的内容,提交那个,但必须有更好的方法!
要澄清:如果验证通过,我需要表单提交,基本上表现得像普通的同步帖子表单提交,它将用户放在服务器从post请求返回的页面上.
我在同一页面上有以下表格：
<form ng-submit="actionA()">
<input type="text">
<input type="submit" value="Submit">
</form>
<form ng-submit="actionB()">
<input type="text">
<input type="submit" value="Submit">
</form>
目前，当我提交任一表单时，页面会重新加载。我该如何防止？我知道我可以使用 event.preventDefault() 但我想知道是否有一个简单的 Angular 解决方案。
我有以下表格：
import { Component } from '@angular/core'
@Component({
selector: 'form1',
template: `
<div >
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<input ngControl="email" type="text" id="mail" required>
<input ngControl="password" type="text" id="password" required>
<input ngControl="confirmPass" type="text" id="confirmPass" required>
<button type="submit">Submit </button>
</form>
</div> `
})
export class Form1Component{
onSubmit(form:any){
console.log(form.value);
}
}
问题是form.value只有一个空对象并且没有ngControl指令值的迹象。我错过了什么吗？
ng-submit ×9
angularjs ×8
javascript ×3
forms ×2
angular ×1
form-submit ×1
jquery ×1
post ×1
validation ×1