Я пытаюсь выполнить настраиваемую проверку на 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;
}

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

Ответы (10)

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

. Пример:

С ошибкой

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

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

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

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

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

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

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

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

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

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

Этот тип ошибки обычно возникает, если вы делаете что-то вроде этого -

name: ['',Validators.required, Validators.compose([Validators.minLength(3),Validators.maxLength(15)])]

Измените это на -

name: ['', Validators.compose([Validators.required,Validators.minLength(3),Validators.maxLength(15)])]

2-е поле -> валидаторы

Вы наверняка определили несколько валидаторов в своей реактивной форме.

неверно:

'status': [false,,[Validators.required]]

Я просто использовал две запятые (,) после определения значения статуса false.

Вправо:

 'status': [false,[Validators.required]]

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

Фикс: "cpf": ["", [Validator.required, ValidateCpf]]

ошибка: userName: [', [Validators.required, Validators.minLength (3)] ,hibitedNameValidator (/ password /)],

ответ: userName: ['', [Validators.required, Validators.minLength (3) ,hibitedNameValidator (/ password /)]],

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

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

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

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

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

Следовательно, если забыть о скобках для их группировки, Angular предполагает, что второй элемент валидатора является частью валидаторов Async, и поэтому мы получаем Ожидаемый валидатор для возврата Promise или Observable

Должно работать:

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

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

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

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

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

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

2022 WebDevInsider