是否可以嵌套像这样的html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
Run Code Online (Sandbox Code Playgroud)
这两种形式都有效吗?我的朋友遇到了这个问题,这是subForm作品的一部分,而另一部分却没有.
背景:我目前正在开发一个带标签的应用程序; 并且我想列出未通过验证的字段/部分,以指示用户在右侧选项卡中查找错误.
所以我试图利用form.$error这样做; 但我还没有完全搞定它.
如果在a内发生验证错误ng-repeat,例如:
<div ng-repeat="url in urls" ng-form="form">
<input name="inumber" required ng-model="url" />
<br />
</div>
Run Code Online (Sandbox Code Playgroud)
空值导致form.$error包含以下内容:
{ "required": [
{
"inumber": {}
},
{
"inumber": {}
}
] }
另一方面,如果验证错误发生在此之外ng-repeat:
<input ng-model="name" name="iname" required="true" />
Run Code Online (Sandbox Code Playgroud)
该form.$error对象包含以下内容:
{ "required": [ {} ] }
但是,我期待以下内容:
{ "required": [ {'iname': {} } ] }
关于为什么缺少元素名称的任何想法?
可以在这里找到一个运行的plunkr:http://plnkr.co/x6wQMp
我动态创建输入并希望验证它们中的每一个,但是无法将ng-messages属性正确地设置为动态生成的字段名称属性.
<input ng-model="sub.name" name="subName{{$index}}" class="form-control" placeholder="name" required maxlength="20" />
<div class="field-error" ng-messages="form.subName{{$index}}.$error" ng-show="form.Name.$touched" role="alert">
<div ng-message="required">Name is required.</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我在第二行遇到问题,我将ng-messages动态设置为ng-messages.我怎样才能做到这一点?
当动态创建"inputName"时,有人会如何使用formName.inputName.$有效?
<form name="formName">
<input ng-repeat="(variable) in variables"
type="text" name="variable.name"
ng-model="variable.name" required />
</form>
Run Code Online (Sandbox Code Playgroud)
HTML输入属性"name"的输出将是字符串"variablename",它将应用于所有重复输入.
如果我们试过这个
<form name="formName">
<input ng-repeat="(variable) in variables"
type="text" name="{{ variable.name }}"
ng-model="variable.name" required />
</form>
Run Code Online (Sandbox Code Playgroud)
HTML输入属性"name"的输出将是字符串"{{variable.name}}",它将应用于所有重复输入.
在这两个条件中的任何一个中,都不会动态创建每个重复输入元素的name属性; 所有输入将共享相同的输入名称.如果您想根据特定名称调用特定输入,那就太好了.
javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
如何使用动态名称在ng-repeat中命名表单?
<div ng-repeat="item in itemList">
<form name="item_details" ng-class="validateForm(item_details)">
//few form elements
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
我想动态命名每个表单.例如,将$ index添加到表单的名称.我该如何实现?我在ng-repeat上尝试过ng-init但是没有用.
<div ng-repeat="fod in form.order_details">
...
<td class="control-cell">
<span ng-class="{error: prForm['qty_'+$index].$error.required && showValidationMessages}">
<input type="number" name="{{'qty_' + $index}}" ng-model="fod.qty" ng-change="qtyPerKindCalc($index);" id="{{'qty_' + $index}}" required />
<span ng-show="prForm['qty_'+$index].$error.required && showValidationMessages" class="error-msg">This field required</span>
</span>
</td>
...
</div>
Run Code Online (Sandbox Code Playgroud)
ngRepeat,我有必要的字段.我有表单对象$ scope.prForm - 我看到$ error.问题在于名称="{{'qty_'+ $ index}}".在$ scope.prForm中我有字段
{{'qty_' + $index}}: instantiate.c
Run Code Online (Sandbox Code Playgroud)
但我需要
qty_0: instantiate.c
Run Code Online (Sandbox Code Playgroud)
如何在name属性中进行良好的{{'qty_'+ $ index}}操作?
我在使用ng-repeat语句进行验证时遇到了困难.我有以下代码.我只想在名称字段为空时将has-error添加到div.form-group.我似乎无法让它工作.有什么想法吗?
<div ng-app="app" ng-controller="bookController">
<form name="myForm" ng-submit="submitMe(this)" novalidate>
<table class="table">
<tr ng-repeat="order in orders">
<ng-form name="innerForm">
<td>{{ order.id }}</td>
<td>
<div class="form-group" ng-class="{ 'has-error' : innerForm.name.$invalid && submitted }">
<input type="input" ng-model="order.name" name="name" required />
</div>
</td>
</ng-form>
</tr>
</table>
<input type="submit" value="submit" ng-click="submitted = true" />
</form>
<pre>
{{ orders | json }}
</pre>
</div>
var app = angular.module("app", []);
app.controller("bookController", function ($scope) {
$scope.submitMe = function(form) {
console.log(form);
};
$scope.orders = [{
id: 1,
name: ''
}, …Run Code Online (Sandbox Code Playgroud) 请参阅此plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
在包含单选按钮组的ng-repeat上使用ng-form标签时,单选按钮被链接,因此如果您在一次重复重复中选中一个单选按钮,它将在所有其他重复按钮中取消选择.这让我感到困惑,因为ng-repeat的模型与其他项目隔离.这不仅是使用ng-repeat时的问题.当具有带有隔离范围的自定义指令的多个实例时,它也会出现
<div ng-form name="myForm">
Run Code Online (Sandbox Code Playgroud)
在Plnkkr中尝试添加一些项目并检查某些项目上的单选按钮.它们应该是独立的,但它们不是.
这是Angular中的错误吗?如果不是为什么它以这种方式工作,我该如何解决它?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Run Code Online (Sandbox Code Playgroud) angularjs ×7
javascript ×3
forms ×1
html ×1
nested-forms ×1
ng-messages ×1
ng-repeat ×1
validation ×1