Очікуваний валідатор поверне 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)]]
};

Пояснення:

У кутовій реактивній формі перевірка проводиться за допомогою вбудованих валідаторів, які можуть бути подані в масиві у 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

Не має прямого відношення до питання ОП, але я отримав ту ж помилку щодо дещо іншої проблеми. У мене був асинхронний валідатор, але я забув повернути з нього Observable (або Promise).

Ось мій оригінальний асинхронний валідатор

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

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

Ось оновлений асинхронний валідатор.

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

Validators.compose () є зайвим;

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

Сподіваюся, це рішення вам допоможе. Дякую.

помилка: userName: ['', [Validators.required, Validators.minLength (3)], prohibNameValidator (/ пароль /)],

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

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

Якщо ви додаєте кілька валідаторів, то вам потрібно додати ще одну третю дужку '[], і всередині цього ви повинні вставити свої валідатори. Як нижче:

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

Помилка: "cpf": ["", Validators.required, ValidateCpf]

Виправлення: "cpf": ["", [Validators.required, ValidateCpf]]

На мою думку, на додаток до прийнятої відповіді добре пояснити, що трапляється помилка, оскільки при використанні реактивних форм для створення FormControl після Initial_value наступними аргументами є відповідно синхронні валідатори та асинхронні валідатори, згруповані у вигляді масиву, кожен . Наприклад:

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

Якщо елемент керування має лише один із них, Angular приймає його як єдиний елемент. Наприклад:

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

Тому, забувши про дужки для їх групування, Angular припускає, що другий елемент валідатора є частиною валідаторів Async, і тому ми отримуємо Expected validator to return Promise or Observable