Mam ten formularz: http://jsfiddle.net/dfJeN/
Jak widać, wartość nazwy dla wejścia jest ustawiona statycznie:
name="username"
, walidacja formularza działa dobrze (dodaj coś i usuń cały tekst z wejścia, tekst musi się pojawić).
Następnie próbuję dynamicznie ustawić wartość nazwy: http://jsfiddle.net/jNWB8/
name="{input.name}"
Następnie stosuję to do mojej walidacji
login.{{input.name}}.$error.required
(ten wzór zostanie użyty w powtórzeniu ng), ale moja walidacja formularza jest zepsuta. Jest poprawnie zinterpretowany w mojej przeglądarce (jeśli sprawdziłem element, zobaczyłem login.username. $ Error.required).
Dowolny pomysł ?
EDYCJA: Po zalogowaniu zakresu w konsoli wydaje się, że plik
{{input.name}}
wyrażenie nie jest interpolowane. Mój formularz jako atrybut {{input.name}}, ale bez nazwy użytkownika.
AKTUALIZACJA: Od wersji 1.3.0-rc.3 name = "{{input.name}}" działa zgodnie z oczekiwaniami. Zobacz # 1404
Odpowiedzi:
Nie możesz zrobić tego, co próbujesz zrobić w ten sposób.
Zakładając, że to, co próbujesz zrobić, to dynamiczne dodawanie elementów do formularza, z czymś w rodzaju powtórzenia ng, musisz użyć zagnieżdżonego formularza ng, aby umożliwić walidację tych pojedynczych elementów:
Niestety, nie jest to dobrze udokumentowana funkcja Angular.
źródło
Użycie zagnieżdżonego ngForm umożliwia dostęp do określonego InputController z poziomu szablonu HTML. Jeśli jednak chcesz uzyskać do niego dostęp z innego kontrolera, to nie pomaga.
na przykład
Używam tej dyrektywy, aby rozwiązać problem:
Teraz możesz używać nazw dynamicznych wszędzie tam, gdzie jest potrzebny tylko atrybut „nazwa-dynamiczna” zamiast atrybutu „nazwa”.
na przykład
źródło
$interpolate
zamiast$parse
, czułem się bardziej przydatny<form ng-repeat="item in items" dynamic-name="'item'+item.id"> ... <span ng-show="item{{item.id}}.$invalid">This form is invalid</span></form>
?Problem powinien zostać rozwiązany w AngularJS 1.3, zgodnie z dyskusją na Github .
Tymczasem oto tymczasowe rozwiązanie stworzone przez @caitp i @Thinkscape :
Demo na JSFiddle .
źródło
Fajny autorstwa @EnISeeK .... ale mam bardziej elegancki i mniej natrętny dla innych dyrektyw:
źródło
Tylko niewielka poprawa w stosunku do rozwiązania EnlSeek
Oto próba plunkera . Oto szczegółowe wyjaśnienie
źródło
Rozwijam nieco rozwiązanie @caitp i @Thinkscape, aby umożliwić dynamiczne tworzenie zagnieżdżonych formularzy ng , na przykład:
Oto moje demo na JSFiddle .
źródło
Użyłem rozwiązania Ben Lesh i dobrze mi się to sprawdza. Ale jeden problem, z jakim się spotkałem, polegał na tym, że kiedy dodałem formę wewnętrzną za pomocą
ng-form
, wszystkie stany formularza, np.form.$valid, form.$error
Etc, stały się niezdefiniowane, gdy używałemng-submit
dyrektywy.Więc gdybym miał to na przykład:
A w moim kontrolerze:
Musiałem więc wrócić do korzystania ze zwykłego zdarzenia kliknięcia w celu przesłania formularza, w którym to przypadku konieczne jest przekazanie obiektu formularza:
Oraz zmieniona metoda kontrolera:
Nie jestem do końca pewien, dlaczego tak jest, ale mam nadzieję, że to komuś pomoże.
źródło
Ten problem został rozwiązany w Angular 1.3+. Oto poprawna składnia tego, co próbujesz zrobić:
źródło
źródło