Как проверить значение FormControl по списку в угловых 5 реактивных формах

Question

Можно ли сравнить входные данные поля формы со списком с помощью пользовательских валидаторов?Я НЕ пытаюсь сравнить два элемента управления формой друг с другом.

Я пробовал с этим подходом:

this.formGroupName = this.formBuilder.group({
    category: ['', Validators.compose([Validators.required, this.checkCategoryInput(
      this.formGroupName.get['category'].value, this.categoryList)])]
});

, где в методе checkCategoryInput() я буду сравнивать значение'category' управляет формой списка допустимых категорий.

public checkCategoryInput(input: string, categoryList: any[]): {[key: string]: boolean} | null{
  console.log(input);
  console.log(categoryList);
  return null;
}

Однако я теряюсь в синтаксисе и получаю несколько ошибок, пытаясь сделать это с помощью этого подхода.У кого-нибудь есть лучший способ сравнить значения элемента управления формы со списком ???

Answer 1

Ты близко, и ты прав;синтаксис немного сбивает с толку.Ожидается, что пользовательский Validator будет методом ValidatorFn, который будет вызываться с параметром AbstractControl.Например, вот очень простой валидатор:

public static numeric(control: AbstractControl): { [key: string]: any } {
    return /^[0-9]+$/.test(control.value) ? null : { 'numeric': false };
}

// .. { category: [0, Validators.required, numeric] }

Мы просто передаем ссылку на метод в FormBuilder, который он будет вызывать, передавая FormControl, в котором он находится, для проверки значения.

Если вы хотите обернуть некоторые из ваших собственных параметров с помощью валидатора, просто создайте свою собственную область действия функции и верните новый метод:

public static checkCategoryInput(input: string, categoryList: any[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const val = control.value;
        return 'Do stuff with the value because `input` and `categoryList` are now in scope!'
    }
}

Так же, как немного дополнительной информации, так как она такжене очень хорошо сказано нигде;возвращаемая подпись { [key: string]: boolean } | null - это то, что будет помещено в свойство errors ngControl, поэтому обычно вы возвращаете null, если оно действительно, и errorName: false, если оно недействительно.Об этом следует помнить, если вы пытаетесь показать сообщения об ошибках, основанные на этом конкретном валидаторе.