Erwarteter Validator, der Promise oder Observable zurückgibt

93

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

Renê Silva Lima
quelle

Antworten:

276

Dies bedeutet, dass Sie dem Array mehrere Validatoren hinzufügen müssen

. Beispiel:

Mit Fehler

profileFormGroup = {
  budget: [null, Validators.required, Validators.min(1)]
};

Oben wird der Fehler ausgegeben, dass der Validator Promise oder Observable zurückgibt

Fix:

profileFormGroup = {
  budget: [null, [Validators.required, Validators.min(1)]]
};

Erläuterung:

In eckiger reaktiver Form Validierung unter Verwendung von eingebauten Validatoren, die in Array in der 2. Position angegeben werden könnten, wenn mehrere Validatoren verwendet werden .

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Vimalraj
quelle
1
Interessanterweise habe ich die Klammern um die Validatoren in der akzeptierten / populären Antwort völlig übersehen. Sie haben sowohl auf das Problem als auch auf die Lösung hingewiesen.
CPHPython
Ihr erster Punkt ist die richtige Antwort. Diese Antwort sollte richtig markiert sein.
Valentino Pereira
1
FANTASTISCHER DANK VIEL
Ravi Rajput
1
Schande über eckige Jungs! Das Problem ist überhaupt nicht zu beobachten, es ist Array-Syntax
happyZZR1400
40

Folgendes sollte funktionieren:

  "cpf": ["", [Validators.required, ValidateCpf]]

Die Argumente, die das Formularsteuerelement erwartet, sind folgende:

constructor(formState: any = null, 
            validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
            asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)

von https://angular.io/api/forms/FormControl

Deblaton Jean-Philippe
quelle
2

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

public availableEmail(formControl: FormControl) {
   if(formControl && formControl.value){
     return this.http.get('')
   }
}

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.

public availableEmail(formControl: FormControl): Observable<any> {
   if(formControl && formControl.value){
     return this.http.get('someUrl');
   }
   return of(true);
}
John
quelle
1

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.

Kamlesh
quelle
Ja. Ich habe Validators.compose ([]) verwendet. es hat bei mir funktioniert
Kumaresan Perumal
1

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

KL Sathish
quelle
„Dies gibt möglicherweise keine Antwort auf die Frage. Bitte fügen Sie die richtige Erklärung hinzu. Sobald Sie einen ausreichenden Ruf haben, können Sie jeden Beitrag kommentieren. Geben Sie stattdessen Antworten, die nicht vom Fragesteller geklärt werden müssen. “
Pushkr
1

Wenn Sie mehrere Validatoren hinzufügen, müssen Sie eine weitere dritte Klammer '[]' hinzufügen. Darin sollten Sie Ihre Validatoren einfügen. Wie unten:

this.yourForm= this.formBuilder.group({
    amount: [null, [Validators.required, Validators.min(1)]],
});
Abdus Salam Azad
quelle
1

Error: "cpf": ["", Validators.required, ValidateCpf]

Fix: "cpf": ["", [Validators.required, ValidateCpf]]

Achraf Farouky
quelle
0

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:

myFormGroup = this.fb.group({
    myControl: ['', [ mySyncValidators ], [ myAsyncValidators ] ]
})

Wenn das Steuerelement nur eines von beiden enthält, akzeptiert Angular es als einzelnes Element. Z.B:

myFormGroup = this.fb.group({
    myControl: ['', mySyncValidator, myAsyncValidator ]
})

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

Laszlo Sarvold
quelle