I'm very new to AngularJS, and new to client side programming.
我是AngularJS的新手,也是客户端编程的新手。
Context:
语境:
I'm implementing a contact form with support for multiple phone numbers and addresses.
我正在实施一个支持多个电话号码和地址的联系表格。
It look like this:
它看起来像这样:
<form name="contactInsertForm" ng-controller="contactInsertController as contactCtrlr" ng-submit="contactInsertForm.$valid && contactCtrlr.save()">
<input type="text" name="name" />
<phones-editor></phones-editor>
<addresses-editor></addresses-editor>
<input type="submit" />
</form>
phonesEditor
and addressesEditor
are custom Angular directives which implement support for adding, removing and editing phones and addresses. The controllers and modules look like this:
phonesEditor和addressesEditor是自定义Angular指令,实现了对添加,删除和编辑电话和地址的支持。控制器和模块如下所示:
Addresses:
地址:
(function () {
var app = angular.module("AddressesEditorModule", []);
app.directive("addressesEditor", function () {
return {
restrict: "E",
templateUrl: "/addressesEditorTemplate.html",
controller: function ($scope) {
this.addresses = [
// this will hold addresses.
];
// ...
}
}
})();
Phones:
手机:
(function () {
var app = angular.module("PhonesEditorModule", []);
app.directive("phonesEditor", function () {
return {
restrict: "E",
templateUrl: "/phonesEditorTemplate.html",
controller: function ($scope) {
this.phones = [
// this will hold phones.
];
// ...
}
}
})();
And the templates:
和模板:
Addresses:
地址:
<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
<p>{{address.address}}</p>
<p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
<!-- inputs for each of the address fields -->
<input type="submit" value="Add" />
</form>
Phones:
手机:
<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
<p>{{phone.number}}</p>
<p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
<!-- inputs for each of the phone fields -->
<input type="submit" value="Add" />
</form>
As you may have noticed, the generated at the browser HTML looks like this:
您可能已经注意到,在浏览器HTML生成的内容如下所示:
<form>
<input type="text" name="name" />
<phones-editor>
<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
<p>{{phone.number}}</p>
<p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
<!-- inputs for each of the phone fields -->
<input type="submit" value="Add" />
</form>
</phones-editor>
<addresses-editor>
<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
<p>{{address.address}}</p>
<p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
<!-- inputs for each of the address fields -->
<input type="submit" value="Add" />
</form>
</addresses-editor>
</form>
The problem:
问题:
I have two form
's inside a form
. The nested forms work correctly, adding and validating values it should be doing, and refusing to add invalid phones/addresses.
我在表单中有两个表单。嵌套表单可以正常工作,添加和验证它应该执行的值,并拒绝添加无效的电话/地址。
But when I click the submit
button at the outer form, it will interpret the inner forms input fields and will raise errors if these fields have invalid values.
但是当我单击外部表单上的提交按钮时,它将解释内部表单输入字段,如果这些字段具有无效值,则会引发错误。
How can I use AngularJS form handling and avoid this situation? Is this possible at all?
如何使用AngularJS表单处理并避免这种情况?这有可能吗?
2 个解决方案
#1
1
This article has exactly what you are looking for.
这篇文章正是您正在寻找的。
The basic gist is that you want to use the ngForm directive inside your form tag.
基本要点是您要在表单标记中使用ngForm指令。
<div ng-form="outerForm">
<input type="text" ng-model="main.outerFormText"/>
<div ng-form="innerForm">
<input type="text" ng-model="main.innerFormText" required/>
<button type="button" ng-click="main.submit('innerForm')"
ng-disabled="innerForm.$invalid">Inner Submit</button>
</div>
<button type="button" ng-click="main.submit('outerForm')"
ng-disabled="outerForm.$invalid">Outer Submit</button>
</div>
示例plnkr
#2
1
you would need a directive if you want child form as isolate form. Have a look at answers from this SO question. please have a look at fiddle attached in this answer. I am putting the fiddle link here for you to js-fiddle to see it in action.
如果您希望子表单作为隔离表单,则需要指令。看看这个SO问题的答案。请看看这个答案附带的小提琴。我在这里把小提琴链接给你js-fiddle,看看它在行动。
putting below code just because SO doesnt accept only fiddle links...
把代码放在下面因为SO不接受小提琴链接......
<form name="parent">
<input type="text" ng-model="outside"/>
<ng-form name="subform" isolate-form>
<input type="text" ng-model="inside"/>
</ng-form>
</form>
#1
1
This article has exactly what you are looking for.
这篇文章正是您正在寻找的。
The basic gist is that you want to use the ngForm directive inside your form tag.
基本要点是您要在表单标记中使用ngForm指令。
<div ng-form="outerForm">
<input type="text" ng-model="main.outerFormText"/>
<div ng-form="innerForm">
<input type="text" ng-model="main.innerFormText" required/>
<button type="button" ng-click="main.submit('innerForm')"
ng-disabled="innerForm.$invalid">Inner Submit</button>
</div>
<button type="button" ng-click="main.submit('outerForm')"
ng-disabled="outerForm.$invalid">Outer Submit</button>
</div>
示例plnkr
#2
1
you would need a directive if you want child form as isolate form. Have a look at answers from this SO question. please have a look at fiddle attached in this answer. I am putting the fiddle link here for you to js-fiddle to see it in action.
如果您希望子表单作为隔离表单,则需要指令。看看这个SO问题的答案。请看看这个答案附带的小提琴。我在这里把小提琴链接给你js-fiddle,看看它在行动。
putting below code just because SO doesnt accept only fiddle links...
把代码放在下面因为SO不接受小提琴链接......
<form name="parent">
<input type="text" ng-model="outside"/>
<ng-form name="subform" isolate-form>
<input type="text" ng-model="inside"/>
</ng-form>
</form>