Modulo di invio angolare all'interno del modulo?

Question

Desidero inviare un modulo all'interno di un modulo, ma quando invio il modulo all'interno del modulo, tutti i moduli vengono inviati ora. È persino possibile farlo?

<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> 

Answer 1

Can you have nested forms? Semplicemente no, il modulo annidato non funzionerà.

Docs Says

In angolare, forme possono essere nidificati. Ciò significa che la forma esterna è valida quando anche tutti i moduli figlio sono validi. Tuttavia, i browser non consentono il nidificazione di elementi, pertanto Angular fornisce la direttiva ngForm che si comporta in modo identico ma può essere nidificata . Questo permette di avere forme nidificate, che è molto utile quando si utilizzano le direttive di convalida angolari in forme che sono dinamicamente generato utilizzando la direttiva ngRepeat

Ma purtroppo non è possibile utilizzare il modulo di ng-submit, che chiameranno il genitore Metodo ng-submit al clic di qualsiasi modulo interno.

Example Plunkr

soluzione per questo sarebbe non utilizzare ng-submit direttiva per la nidificato interna da. È necessario utilizzare ng-click sul pulsante e modificare il tipo di pulsante su button da submit.

Markup

<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