sprawdzanie poprawności zagnieżdżonych formularzy bez wpływu na formularz rodzica

Question

Występuje problem z walidacją w zagnieżdżonych formularzach w aplikacji angularjs 1.5 i istnieje issue in github about it.

, ale 2 osoby w tym temacie oferują rozwiązanie, a jedna z nich otworzyła drogę do rdzenia angularjs, który jest dyrektywą ngFormTopLevel, a drugi oferuje użytkownik o nazwie izol-formularz.

ale żaden z nich nie poradzi sobie z tą sytuacją i nie działa dla mnie ... przynajmniej!

pozwala przyjąć tę strukturę:

<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 jest zależny od zagnieżdżonego walidacji formularza i nie powinien!

---

przypadek testowy 1:

Krok 1: Wypełnij input3 z dowolnym tekstem i więcej niż 5 znaków.

Oczekiwane: ButtonX1 powinien być włączony.

Wynik: ButtonX1 jest wciąż wyłączony.

---

przypadek testowy 2:

Krok 1: Wypełnij input1 z dowolnym tekstem.

Krok 2: Wypełnij input2 dowolnym tekstem.

Oczekiwane: ButtonX2 powinien być włączony.

Wynik: ButtonX2 jest włączony.

---

przypadek Test 3:

Krok 1: Wypełnij input3 z dowolnym tekstem i więcej niż 5 znaków.

Krok 2: Wypełnij input1 dowolnym tekstem.

Krok 2: Wypełnij input2 dowolnym tekstem.

Oczekiwane: Należy włączyć ButtonX1 i ButtonX2.

Wynik: ButtonX1 i ButtonX2 są aktywne.

---

a drugim problemem jest to, że znacznik P w formularzu zagnieżdżonym nie wyświetla się, gdy Input01 jest nieprawidłowy. Próbowałem zarówno isolatedForm i ngFormTopLevel, ale oba z nich mają ten problem.

Answer 1

Myślę, że jest to rozwiązanie zgodne z wymaganiami.

<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

Wydaje się, że potrzebna jest tylko funkcja $ removeControl na kontrolerze nadrzędnym. Ta bardzo prosta dyrektywa działa dla mnie. Zastosuj do swojego formularza ng.