2015-08-25 43 views
6

我想在表單內發送表單,但是當我在表單中提交表單時,現在所有表單都已提交。 它甚至可以做到這一點?裏面的表單提交表單?

<form name="add_foobar_form" novalidate ng-submit="addFoobar(foobar)"> 

    <form name="send_contact_form" novalidate ng-submit="sendContact(hello)"> 
     <input type="text" ng-model="hello.bye"> 
     <input type="submit" value="sendmall"> 
    </form> 

    <input type="text" ng-model="foobar.go"> 
    <input type="submit" value="sendall"> 

</form> 
+0

這是內部形狀http://stackoverflow.com/questions/379610/can-you-nest-html-forms最好不要嵌套表格 可以嘗試提交按鈕的形式標籤http://www.w3schools.com/tags/att_button_form.asp – Grievoushead

回答

13

Can you have nested forms?只是不,嵌套表單不起作用。

Docs Says

在角,形式可以嵌套。這意味着當所有子表單都有效時,外部表單是 有效。但是,瀏覽器 不允許嵌套元素,因此Angular提供的嵌套ngform指令的行爲相同,但可以是 。這可以讓你有嵌套形式,是動態使用ngRepeat指令

產生 但不幸的是,你不能使用ng-submit表格形式採用了棱角分明的驗證指令時,這是非常有用的 ,將調用父點擊任何內部形式的方法ng-submit

Example Plunkr

的解決方法,這將是不使用ng-submit指令的內部嵌套的。您應該在按鈕上使用ng-click並將按鈕類型從submit更改爲button

標記

<form name="add_foobar_form" novalidate ng-submit="addFoobar('foobar')"> 
    <ng-form name="send_contact_form" novalidate> 
     <input type="text" ng-model="hello.bye"> 
     <input type="button" value="sendmall" ng-click="sendContact('hello')"> 
    </ng-form> 

    <input type="text" ng-model="foobar.go"> 
    <input type="submit" value="sendall"> 
</form> 

Workaround Plunkr

+0

問題是,這兩種情況下,相同的事件處理程序被稱爲 – dfsq

+0

指出..感謝..我的工作.. .. –