Ostatnio zacząłem używać AngularJS i myślę, że wpadłem na dziwny błąd.Walidacja formularza nie jest aktualizowana po usunięciu elementu z modelu. Pluskwa?
pierwsze, oto niektóre kod roboczych:
Widok:
<body ng-controller="MainCtrl">
<form name="form">
<div ng-repeat="phone in phoneNumbers">
<input ng-model="phone.number" required />
<button ng-click="deleteNumber($index)">Delete Number</button>
</div>
<button ng-click="addNumber()">Add Number</button>
<input type="submit" ng-disabled="form.$invalid" />
</form>
</body>
Kontroler:
app.controller('MainCtrl', function ($scope) {
$scope.phoneNumbers = [{
number: '212-123-4567'
}];
$scope.addNumber = function() {
$scope.phoneNumbers.push({
number: ''
});
};
$scope.deleteNumber = function (index) {
$scope.phoneNumbers.splice(index, 1);
};
});
Oto Plunkr: Working example.
Myślę, że kod jest dość prosty: jest tam ng-repeat wyświetlający każdy numer telefonu, który można edytować/usunąć. Jeśli dodano numer telefonu, nie może on być pusty; przycisk przesyłania zostanie wyłączony, jeśli będzie pusty numer telefonu.
Problem pojawia się, gdy przycisk przesyłania znajduje się powyżej ng-repeat. Jeśli dodać numer telefonu, pozostaw puste, a następnie usunąć go, przycisk submit pozostanie wyłączone:
<body ng-controller="MainCtrl">
<form name="form">
<input type="submit" ng-disabled="form.$invalid" />
<div ng-repeat="phone in phoneNumbers">
<input ng-model="phone.number" required />
<button ng-click="deleteNumber($index)">Delete Number</button>
</div>
<button ng-click="addNumber()">Add Number</button>
</form>
</body>
Oto plunkr: Broken example.
Uwielbiam AngularJS, ale to prawie doprowadziło mnie do szaleństwa. Spędziłem ponad 20 godzin ścigając ten głupi błąd. Ponieważ zwykłe demo ma przycisk przesyłania na dole, nie mogłem odtworzyć problemu. Musiałem wziąć mój aktualny kod i powoli zredukować kod do minimalnego minimum. Jest to bardzo duża i złożona aplikacja i ... Cóż, przestanę teraz jęczeć.
Moje pytanie jest dwojaki:
Czy to błąd? Próbowałem nawet tego z niestabilnym odgałęzieniem (1.1.3) i działa dokładnie tak samo.
Co mogę zrobić, aby obejść to, bez zmiany kolejności źródła. Wiem, że mogę poruszać się po moim przycisku przesyłania za pomocą CSS, ale w moim przypadku to nie jest opcja; Potrzebuję przycisku "prześlij", aby być pierwszą rzeczą w tej formie.
PS: Here's a video of it in action.
ja nie znam odpowiedzi na swoje pytanie, ale wydaje się, że jeśli zmieniasz swój element submit na przycisk podstawowy zamiast "", działa zgodnie z oczekiwaniami, np. ''. Czy to pomaga jako obejście? – Marc
grał z uszkodzonym plunkr i umieszczając '{{phoneNumbers}}' w html, aby wizualizować, co się dzieje z obiektem, również zatrzymało problem i wynik był poprawny. Oczywiście nie jest to obejście, ale interesujące – charlietfl
+1 dla właściwego sposobu zadawania pytań na tagu angularjs. – Stewie