angularjs - template - angular title html



Come posso verificare la validità di un modulo incluso ng dall'ambito genitore? (2)

Ho una sottomaschera condivisa tra più viste nella mia app. In una vista, questa sottomaschera viene visualizzata da sola con un pulsante Indietro / Continua in basso che porta l'utente alla sottomaschera successiva. In un'altra vista, la sottomaschera viene visualizzata sulla stessa pagina di altre sottomaschre (in pratica una forma lunga).

Poiché l'html della sottomaschera è identico al 100% in entrambe le visualizzazioni, l'ho separato in un partial e sto usando ng-include per renderlo. Nella vista che visualizza solo la sottomaschera con i pulsanti Indietro / Avanti, rendo i pulsanti Indietro / Avanti all'interno dell'HTML del genitore.

Visivamente, tutto funziona user.email, user.password, user.etc... e sono in grado di accedere a tutti i dati inseriti nel modulo ( user.email, user.password, user.etc... ).

Il problema è che sto abilitando / disabilitando il pulsante "continua" in base al fatto che l'utente abbia completato correttamente il modulo, e questo non funziona nella variante "subform-only" perché l'ambito genitore non sembra essere in grado di accedere allo stato del modulo. Se inserisco i pulsanti nel partial, funziona, ma non voglio farlo perché i pulsanti non sono presenti in ogni istanza in cui viene utilizzato questo partial.

Esempio JSFiddle

Si noti nel mio esempio che il pulsante di invio all'interno del bordo rosso è disabilitato fino a quando non viene digitato qualcosa nella casella e il "Form Invalido?" aggiornamenti del valore, mentre il pulsante all'interno del bordo blu è sempre abilitato e il "Form Invalido?" il valore è vuoto

Come posso accedere al valore di myForm.$invalid dall'ambito genitore?

https://src-bin.com


Answer #1

L'ambito secondario creato quando si utilizza ng-include nasconde le funzioni del modulo dal genitore.

Oltre ad usare una direttiva, puoi anche aggiungere un oggetto nel genitore, ma è importante impostare il nome del modulo su un oggetto con una proprietà come questa:

<form name="myFormHolder.myForm">

e nel controller genitore

$scope.myFormHolder = {};

allora il seguente dovrebbe funzionare:

$scope.myFormHolder.myForm.$pristine

In questo modo quando il modulo viene valutato, myForm. $ Valido verrà impostato sul genitore. Credo di aver posto la stessa domanda: perché formare undefined all'interno di ng-include durante il controllo di $ pristine o $ setDirty ()?


Answer #2

Se si tratta di una sotto-forma, puoi semplicemente spostare il tag form dalla sottomaschera e nella forma principale: JSFiddle aggiornato

Puoi anche annidare i tuoi moduli usando la ngForm-directive :

In forme angolari può essere annidato. Ciò significa che la forma esterna è valida quando anche tutti i moduli figlio sono validi. Tuttavia i browser non consentono la nidificazione di elementi, per questo motivo l'angolare fornisce alias di ngForm che si comporta in modo identico ma che consente l'annidamento del modulo.

Il risultato è un po 'confuso. Preferirei creare una direttiva "myForm" con un nuovo scope per evitare l'uso di $ parent - qualcosa del tipo:

myApp.directive('myForm',function(){
    return{ 
        restrict:'E',
        scope:{model:'='},
        templateUrl:'/form.html',
        replace:true
    }
});

- guarda questo esempio di JSFiddle





angularjs-scope