2013-07-25 17 views
6

Chcę zbudować zagnieżdżone formularz za pomocą ng-powtórzenie jak poniżej. Ponieważ moje pola wejściowe są wymagane, chcę dodać komunikat o błędzie w następnej linii z czymś takim: <span ng-show="submitted && editableForm.[e.name].$error.required" class="error">Required field</span>, Wiem, że to źle "editableForm. [E.name]. $ Error.required", co jest poprawne sposób to zrobić?Angularjs zagnieżdżanie formularza sprawdzanie poprawności ng powtórzyć

UPDATE prostu próbowałem dodając <ng-form name="rowForm">, ale to działa tylko gdy używam atrybut name hardcode, w moim przypadku jest to dynamicznie generowane w [e.name]

Dzięki Leo

NESTED FORMULARZ

<form name="editableForm" novalidate="novalidate"><div class="newEditable"> 
    <ul ng-repeat="row in newRows"> 
    <li ng-repeat="e in rowAttrs"> 
    <input type="text" ng-model="newRows[e.name]" name="e.name" ng-required="e.required"> 
    </li> 
    <li><a href="" ng-click="rm_row($index)">x</li> 
    </ul> 
    </div><a href="" ng-click="newRow()">{{add}}</a> 
    <a ng-show="newRows.length > 0" ng-click="saveIt(editableForm)">{{save}}</a> 
</form> 

Odpowiedz

10

W tym konkretnym przykładzie kodu trzeba także dodać atrybut ng-form do pierwszego ng-repeat:

<ul ng-repeat="row in newRows" ng-form="innerForm"> 

Teraz można zrobić coś podobnego z oryginalnego rozwiązania, aby podświetlić wymagane pole:

<div class="validation_error" ng-show="e.required && innerForm['\{\{e.name\}\}'].$error.required"> 
    Required 
</div> 
+0

Korzystałem z rozwiązania opisanego w mojej odpowiedzi, aby dynamicznie renderować pola formularza w formularzu zawierającym i upewnić się, że ich stan sprawdzania poprawności jest propagowany do formularza zawierającego, tj. Użytkownik nie powinien mieć możliwości kliknięcia przycisku Wyślij, jeśli wymagane jest dynamicznie renderowane pole formularza i nie ma poprawnej wartości. –

4

rozwiązać dodając ucieczkę z dynamicznym nazwy jsfiddle.net/langdonx/6H8Xx/2

Kod

<div class="validation_error" ng-show="e.required && rowForm['\{\{e.name\}\}'].$error.required"> 
    Required 
</div> 
+1

To, co się tutaj dzieje, to c reating the rowForm. Właściwość {{e.name}}, która nie jest dynamiczna. Aktualna nazwa nieruchomości to {{e.name}}, dlatego ucieczka z niej działa. Twój jsfiddle ma również poprawną poprawkę, która tworzy wewnętrzną formę zwaną "formularzem". Każda wewnętrzna forma ma właściwość {{e.name}}, ale nie są właściwościami dynamicznymi. Możesz zobaczyć, że działa tutaj, zmieniając {{e.name}} na 'field' http://jsfiddle.net/6H8Xx/270/. –

Powiązane problemy