Ich habe eine reaktive Form in Angular wie folgt:
this.AddCustomerForm = this.formBuilder.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
Picture: [''],
Username: ['', Validators.required],
Password: ['', Validators.required],
Address: ['', Validators.required],
Postcode: ['', Validators.required],
City: ['', Validators.required],
Country: ['', Validators.required]
});
createCustomer(currentCustomer: Customer)
{
if (!this.AddCustomerForm.valid)
{
//some app logic
}
}
this.AddCustomerForm.valid gibt false zurück, aber alles sieht gut aus.
Ich habe versucht, die Statuseigenschaft in der Steuerelementauflistung zu überprüfen. Aber ich frage mich, ob es eine Möglichkeit gibt, die ungültigen zu finden und dem Benutzer anzuzeigen?
Antworten:
Sie können einfach jedes Steuerelement durchlaufen und den Status überprüfen:
quelle
findInvalidControls()
dich zurück?Ich habe gerade dieses Problem bekämpft: Jedes Formularfeld ist gültig, aber das Formular selbst ist immer noch ungültig.
Es stellte sich heraus, dass ich 'Validator.required' in einem FormArray festgelegt hatte, in dem Steuerelemente dynamisch hinzugefügt / entfernt werden. Selbst wenn das FormArray leer war, war es dennoch erforderlich und daher war das Formular immer ungültig, selbst wenn jedes sichtbare Steuerelement korrekt ausgefüllt war.
Ich habe den ungültigen Teil des Formulars nicht gefunden, da meine Funktion 'findInvalidControls' nur die FormControl und nicht FormGroup / FormArray überprüft hat. Also habe ich es ein bisschen aktualisiert:
quelle
Wählen Sie unter DevTools in Chrome die Registerkarte Konsole aus.
Geben Sie in der Eingabeaufforderung der Konsole den folgenden Befehl ein:
Die Ausgabe sollte ungefähr so aussehen:
In diesem Fall dient der unterstrichene Text zur Formularsteuerung
listen-address
. Und der eingekreiste Text:.ng-invalid
zeigt an, dass das Steuerelement ungültig ist.quelle
Sowohl die Formulare als auch alle Ihre Steuerelemente erweitern die Winkelklasse AbstractControl. Jede Implementierung verfügt über einen Zugriff auf die Validierungsfehler.
Die API-Dokumente enthalten alle Verweise https://angular.io/api/forms/AbstractControl
Bearbeiten
Ich dachte, der Fehler-Accessor funktioniert so, aber dieser Link zu Github zeigt, dass es einige andere Leute gibt, die genauso dachten wie ich https://github.com/angular/angular/issues/11530
In jedem Fall können Sie mit dem Steuerelement-Accessor alle formControls in Ihrem Formular durchlaufen.
quelle
In Winkel 9 können Sie jetzt die Methode markAllAsTouched () verwenden, um die ungültigen Steuerelementvalidatoren anzuzeigen:
quelle
Wenn Sie nicht viele Felder im Formular haben, können Sie einfach F12 drücken und mit der Maus über das Steuerelement fahren. Sie können das Popup mit den makellosen / berührten / gültigen Werten des Felds sehen - "# fieldname.form-control.ng- untouched.ng-invalid ".
quelle
Ich denke, Sie sollten versuchen
this.form.updateValueAndValidity()
, dieselbe Methode in jedem der Steuerelemente zu verwenden oder auszuführen.quelle
Versuche dies
quelle
Dadurch werden alle Namen der Steuerelemente log protokolliert
for (let el in this.ReactiveForm.controls) { if (this.ReactiveForm.controls[el].errors) { console.log(el) } }
Sie können daraus ein Array oder einen String erstellen und dem Benutzer anzeigen
quelle
Ich habe mir erlaubt , den AngularInDepth.com- Code so zu verbessern , dass er auch in verschachtelten Formen rekursiv nach ungültigen Eingaben sucht. Ob es von FormArray-s oder FormGroup-s verschachtelt wird. Geben Sie einfach die oberste FormGroup ein und es werden alle ungültigen FormControls zurückgegeben.
Sie können möglicherweise einige der Typprüfungen "instanceof" überfliegen, wenn Sie die FormControl-Prüfung und die Hinzufügung zu ungültigen Array-Funktionen in eine separate Funktion trennen würden. Dies würde die Funktion viel sauberer aussehen lassen, aber ich brauchte eine globale Option mit einer einzigen Funktion, um ein flaches Array aller ungültigen formControls zu erhalten, und dies ist die Lösung!
Nur für diejenigen, die es brauchen, damit sie es nicht selbst codieren müssen.
Bearbeiten Sie # 1
Es wurde angefordert, dass auch ungültige FormArray-s und FormGroups zurückgegeben werden. Wenn Sie dies ebenfalls benötigen, verwenden Sie diesen Code
quelle
Sie können den Wert des Formulars protokollieren
console.log(this.addCustomerForm.value)
. Es tröstet den Wert aller Steuerelemente. Dann zeigen null oder "" (leere) Felder ungültige Steuerelemente anquelle