convalidare i moduli annidati senza influire sul modulo principale

Question

C'è un problema di convalida nei moduli nidificati in angularjs 1.5 e c'è un issue in github about it.

ma 2 persone in questo argomento offrono la soluzione e uno di loro ha aperto la sua strada al nucleo angularjs che è la direttiva ngFormTopLevel e l'altro offerto da un utente chiamato isolare-modulo.

ma nessuno di loro può gestire questa situazione e non funziona per me ... almeno!

lascia supporre questa struttura:

<ng-form name="X1" novalidate> 

    <ng-form name="X2" novalidate isolate-form> 

     <input name="Input01" ng-model="input1" required /> 
     <p ng-show="X2.Input01.$touched && X2.Input01.$invalid">input is not valid</p> 

     <input name="Input02" ng-model="input2" required /> 

     <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

    </ng-form> 

<input name="Input03" ng-model="input3" required ng-minlength="5" /> 

<input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.$invalid" /> 

</ng-form> 

tl; dr: ButtonX1 dipende validazione dei form nidificato e non dovrebbe!

---

caso Test 1:

Fase 1: Riempire input3 con qualsiasi testo e più di 5 caratteri.

Previsto: ButtonX1 deve essere abilitato.

Risultato: ButtonX1 ancora disabilitato.

---

caso Test 2:

Fase 1: Riempire input1 con qualsiasi testo.

Passaggio 2: immettere input2 con qualsiasi testo.

Previsto: ButtonX2 deve essere abilitato.

Risultato: ButtonX2 è abilitato.

---

caso Test 3:

Fase 1: Riempire input3 con qualsiasi testo e più di 5 caratteri.

Passaggio 2: immettere input1 con qualsiasi testo.

Passaggio 2: immettere input2 con qualsiasi testo.

Previsto: ButtonX1 e ButtonX2 devono essere abilitati.

Risultato: ButtonX1 e ButtonX2 sono abilitati.

---

e l'altro problema è che il tag P all'interno del modulo nidificato non viene visualizzato quando Input01 non è valido. Ho provato sia il isolateForm che il ngFormTopLevel ma entrambi hanno questo problema.

Answer 1

Penso che questa sia la soluzione secondo le vostre esigenze.

<ng-form name="X1" novalidate> 

     <ng-form name="X2" novalidate isolate-form> 

      <input name="Input01" ng-model="input1" required /> 
      <p ng-show="X2.Input01.$invalid && X2.Input01.$touched">input is not valid</p> 

      <input name="Input02" ng-model="input2" required /> 

      <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

     </ng-form> 

     <input name="Input03" ng-model="input3" required ng-minlength="5" /> 

     <input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.Input03.$invalid" /> 

    </ng-form> 

Answer 2

Sembrerebbe che l'unica cosa necessaria sia chiamare $ removeControl sul controller del modulo padre. Questa direttiva molto semplice ha funzionato per me. Applica al tuo modulo ng.

function isolateFormDirective() { 
    return { 
     restrict: 'A', 
     require: ['form', '^form'], 
     link: function(scope, element, attrs, forms) { 
      forms[1].$removeControl(forms[0]); 
     } 
    } 
} 

export default isolateFormDirective;