2016-07-17 7 views
3

Ich habe einige Probleme mit der Deaktivierung Senden Sie die Schaltfläche in einem HTML-Formular in AngularJS.So deaktivieren Sie in AngularJS im folgenden Szenario zu übermitteln?

Szenario:

  • mir einen bestimmten Prozess von einer HTML Select Box dh die Auswahl. Drop Down-Liste
  • Nachdem ich einige Eintrag aus, dass wählen, ist der untere Teil automatisch mit der erforderlichen Form aufgefüllt, die wiederum einen Satz hat der Eingänge
  • Sobald Sie in diesen Wert zu füllen, können Sie entweder einreichen oder Abbrechen die Anfrage

Zustand:
Es gibt einen Prozess in der Liste ist, wo ich 1 oder hochladen mehr Dateien zusammen mit anderen Eingabeparametern. Um dies zu tun, verwende ich einen zweistufigen Ansatz, bei dem ich zuerst eine Datei mit einer Schaltfläche auswähle und dann eine andere Schaltfläche zum Hochladen der Datei verwende. Ein Klick auf diese Schaltfläche führt zu einem REST-Aufruf und die Datei wird an das gewünschte Ziel gesendet.
Ich verwende ng-file-upload Direktive von , um dies zu erreichen.

Problem:
ich zunächst ng-disabled wurde mit der Bedingung deaktivieren Submit-Button, dass Alle Pflichteingabeelemente gefüllt sind und alle Eingangs Validierungen sind geben. Jetzt tritt das Problem auf, wenn ich in den Anwendungsfällen bin, die Dateien hochladen müssen. Wenn ich eine Datei wähle und sie hochlade, behandelt HTML dieses Element als leer, da die Datei bereits an ihr Ziel gesendet wurde und daher die Validierung nicht besteht Alle obligatorischen Eingabeelemente sind gefüllt! Wenn ich diese Validierung entferne, wird mein Formular erwartungsgemäß gesendet, auch wenn Pflichtfelder leer sind.

Was kann ich in diesem Fall tun, um meinen Submit-Button zu deaktivieren?

+0

i auf solche Fälle gearbeitet haben, aber ich glaube, Sie Booleschen Wert als 'true' zu ​​einem gewissen Variablen zuweisen können (etwa $ scope.flag), wenn der REST-Service zurückkehrt rescue response.On 'ng-submit' Funktion, können Sie prüfen, ob die' Form. $ valid' ist wahr und '$ scope.flag' ist wahr und dann das Formular absenden. –

+0

@ShashankVivek Ich habe das tatsächlich versucht. Das Problem in diesem Fall wird diese Form. $ Valid wird falsch. Und daher bleibt die Schaltfläche deaktiviert – theHeman

Antwort

0

Erstellen Sie eine boolesche Variable als was @ShashankVivek sagte.

Wenn die Datei hochgeladen wurde $ scope.uploaded = true.

so sollten Sie Ihre Taste so aussehen

<button data-ng-disabled="!form.valid && !uploaded">Submit</button> 
+0

Was ist der Unterschied zwischen ng-deaktiviert und Data-ng-deaktiviert? – theHeman

+0

@ashhem Daten-ng-deaktiviert durchläuft HTML5-Validatoren besser im Vergleich zu ng-deaktiviert. Es ist besser, "data-ng" anstelle von "ng" zu verwenden. –

Verwandte Themen