Erwarteter Validator, der Promise oder Observable zurückgibt

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

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]]

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

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);
}

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.

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

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)]],
});

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

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

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