Ожидается, что валидатор вернет Promise или Observable

Я пытаюсь выполнить настраиваемую проверку на Angular 5, но сталкиваюсь со следующей ошибкой

Expected validator to return Promise or Observable

Я просто хочу вернуть в форму ошибку, если значение не соответствует требуемому, вот мой код:

Это компонент, в котором находится моя форма

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

Этот код находится в файле с проверкой, которую я хочу реализовать:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

Кто-нибудь может мне помочь? Работает ли этот тип проверки только с наблюдаемыми, или я могу сделать это, не будучи обещанием или наблюдаемым? Благодарность

Это означает, что вам нужно добавить несколько валидаторов в массив

. Пример:

С ошибкой

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

Выше одного выдает ошибку, что валидатор возвращает Promise или Observable

Исправить:

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

Пояснение:

В angular Reactive проверка формы выполняется с помощью встроенных валидаторов, которые могут быть указаны в массиве во 2 позиции, когда используются несколько валидаторов .

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Следующее должно работать:

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

Аргументы, которые ожидает элемент управления формой, следующие:

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

из https://angular.io/api/forms/FormControl

Не имеет прямого отношения к вопросу OP, но я получил ту же ошибку по немного другой проблеме. У меня был асинхронный валидатор, но я забыл вернуть из него Observable (или Promise).

Вот мой оригинальный валидатор async

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

Дело в том, что если оператор if ложен? Мы ничего не возвращаем, и получаем ошибку времени выполнения. Я добавил возвращаемый тип (убедившись, что среда IDE жалуется, если мы не возвращаем правильный тип), а затем возвращаюсь of(true)в случае неудачного выполнения if-предложения.

Вот обновленный валидатор async.

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

Validators.compose () является избыточным;

Вы можете просто передать массив. Проблема OP вызвана невозможностью обернуть валидаторы в [], чтобы превратить их в массив, поэтому предполагается, что minLength () является асинхронным, и появляется сообщение об ошибке.

Надеюсь, это решение вам поможет. Спасибо.

error: userName: ['', [Validators.required, Validators.minLength (3)] ,hibitedNameValidator (/ password /)],

ans: userName: ['', [Validators.required, Validators.minLength (3) ,hibitedNameValidator (/ password /)]],

валидаторы используют только второй параметр во внутреннем массиве. не для внешнего массива

Если вы добавляете несколько валидаторов, вам нужно добавить еще одну третью скобку '[]' и внутри нее вы должны поместить свои валидаторы. Как показано ниже:

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

Ошибка: "cpf": ["", Validators.required, ValidateCpf]

Исправить: "cpf": ["", [Validators.required, ValidateCpf]]

Я думаю, что в дополнение к принятому ответу хорошо уточнить, что ошибка возникает, потому что при использовании реактивных форм для создания FormControl после начального_значения следующие аргументы являются, соответственно, синхронными валидаторами и асинхронными валидаторами, сгруппированными в виде массива каждый . Например:

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

Если в элементе управления есть только один из них, Angular принимает его как единый элемент. Например:

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

Поэтому, когда забываем о скобках для их группировки, Angular предполагает, что второй элемент валидатора является частью валидаторов Async, и поэтому мы получаем Expected validator to return Promise or Observable