Ho iniziato a utilizzare lo AngularJS ultimamente e penso di essermi imbattuto in un bug strano.La convalida del modulo non viene aggiornata quando l'articolo viene rimosso dal modello. Bug?
In primo luogo, ecco qualche codice di lavoro:
Vista:
<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>
Controller:
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);
};
});
Ecco il Plunkr: Working example.
Penso che il codice sia piuttosto semplice: c'è uno ng-repeat che visualizza ogni numero di telefono, che è possibile modificare/eliminare. Se viene aggiunto un numero di telefono, non può essere vuoto; il pulsante di invio sarà disabilitato se c'è un numero di telefono vuoto.
Il problema sorge quando il pulsante di invio è disposto sopra la ng-repeat. Se si aggiunge un numero di telefono, lasciarlo vuoto, e quindi eliminarlo, il pulsante di invio rimarrà disattivato:
<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>
Ecco il plunkr: Broken example.
Amo AngularJS, ma questo mi ha quasi fatto impazzire. Ho passato più di 20 ore a inseguire questo stupido bug. Poiché una normale demo ha il pulsante di invio in basso, non è stato possibile riprodurre il problema. Ho dovuto prendere il mio codice effettivo e ridurre lentamente il codice al minimo indispensabile. È un'app molto grande e complessa, e ... beh, smetterò di piagnucolare ora.
La mia domanda è duplice:
Si tratta di un bug? Ho anche provato questo con il ramo instabile (1.1.3), e funziona allo stesso modo.
Cosa posso fare per aggirare il problema, senza cambiare l'ordine di origine. So che posso spostare il mio pulsante di invio tramite CSS, ma nel mio caso non è davvero un'opzione; Ho bisogno che il pulsante di invio sia la prima cosa nel modulo.
P.S. Here's a video of it in action.
Non conosco la risposta alla tua domanda, ma sembra che se si modifica l'elemento di invio su un pulsante di base invece di un '', funziona come previsto, ad es. ' Invia'. Questo aiuta come soluzione? –
Marc
stava giocando con plunkr rotto e immissione '{{}} phoneNumbers' in html di visualizzare ciò che stava accadendo di opporsi anche fermato l'emissione e l'output era corretta. Ovviamente non una soluzione alternativa ma interessante – charlietfl
+1 per un modo corretto di porre una domanda sul tag angularjs. – Stewie