Ich versuche, eine benutzerdefinierte Validierung für Angular 5 durchzuführen, aber ich sehe den folgenden Fehler
Expected validator to return Promise or Observable
Ich möchte nur einen Fehler an das Formular zurückgeben, wenn der Wert nicht mit dem erforderlichen übereinstimmt. Hier ist mein Code:
Dies ist die Komponente, in der sich mein Formular befindet
constructor(fb: FormBuilder, private cadastroService:CadastroService) {
this.signUp = fb.group({
"name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
"email": ["", Validators.compose([Validators.required, Validators.email])],
"phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
"cpf": ["", Validators.required, ValidateCpf]
})
}
Dieser Code befindet sich in der Datei mit der Validierung, die ich implementieren möchte:
import { AbstractControl } from '@angular/forms';
export function ValidateCpf(control: AbstractControl){
if (control.value == 13445) {
return {errorCpf: true}
}
return null;
}
Kann mir jemand helfen? Funktioniert diese Art der Validierung nur mit Observablen oder kann ich dies tun, ohne ein Versprechen oder Observable zu sein? Vielen Dank
quelle
Folgendes sollte funktionieren:
Die Argumente, die das Formularsteuerelement erwartet, sind folgende:
von https://angular.io/api/forms/FormControl
quelle
Nicht direkt mit der Frage des OP verbunden, aber ich habe den gleichen Fehler bei einem etwas anderen Problem erhalten. Ich hatte einen asynchronen Validator, aber ich habe vergessen, ein Observable (oder Promise) davon zurückzugeben.
Hier war mein ursprünglicher asynchroner Validator
Die Sache ist, was ist, wenn die if-Anweisung falsch ist? Wir geben nichts zurück und erhalten einen Laufzeitfehler. Ich habe den Rückgabetyp hinzugefügt (um sicherzustellen, dass sich die IDE beschwert, wenn wir nicht den richtigen Typ zurückgeben), und dann gebe ich zurück,
of(true)
falls der if-Satz fehlschlägt.Hier ist der aktualisierte asynchrone Validator.
quelle
Validators.compose () ist redundant;
Sie können einfach ein Array übergeben. Das Problem von OP wird dadurch verursacht, dass die Validatoren nicht in [] eingeschlossen werden, um sie zu einem Array zu machen. Daher wird angenommen, dass minLength () asynchron ist und die resultierende Fehlermeldung angezeigt wird.
Ich hoffe, diese Lösung wird Ihnen helfen. Vielen Dank.
quelle
Fehler: Benutzername: ['', [Validators.required, Validators.minLength (3)], verbotener NameValidator (/ password /)],
ans: userName: ['', [Validators.required, Validators.minLength (3), verbotener NameValidator (/ password /)]],
Validatoren verwenden nur den zweiten Parameter im internen Array. Nicht für externe Arrays
quelle
Wenn Sie mehrere Validatoren hinzufügen, müssen Sie eine weitere dritte Klammer '[]' hinzufügen. Darin sollten Sie Ihre Validatoren einfügen. Wie unten:
quelle
Error:
"cpf": ["", Validators.required, ValidateCpf]
Fix:
"cpf": ["", [Validators.required, ValidateCpf]]
quelle
Ich denke, es ist gut, zusätzlich zu der akzeptierten Antwort zu verdeutlichen, dass der Fehler auftritt, da bei Verwendung reaktiver Formulare zum Erstellen eines FormControl nach dem initial_value die folgenden Argumente synchrone Validatoren bzw. asynchrone Validatoren sind, die jeweils in Form eines Arrays gruppiert sind . Z.B:
Wenn das Steuerelement nur eines von beiden enthält, akzeptiert Angular es als einzelnes Element. Z.B:
Wenn Angular die Klammern für die Gruppierung vergisst, geht er davon aus, dass das zweite Validatorelement Teil der Async-Validatoren ist, und daher erhalten wir die
Expected validator to return Promise or Observable
quelle