Question

我希望根据以前已经存在的条目来限制用户可以在字段中输入的内容。

例如，用户已经将这些值输入数据库：

["typescript", "C#", "python"]

当他们在输入字段中确切输入这些已经存在的值之一时，我希望显示验证器消息。

我从另一个发现的答案中得出对正则表达式的负面看法：

^(?!.*(typescript|C#|python)).*$

，但是如果这些单词之一出现在输入字符串中的任何地方，它将使验证失败（例如：“ pythons”将失败）。如果这些单词之一恰好出现在输入中，我只是希望它失败。

编辑

我最终使用了下面提供的自定义验证程序解决方案。下面的正则表达式解决方案也有效。如上所述，验证器是解决此特定问题的正确解决方案。

Answer 1

由于您更喜欢寻找正则表达式解决方案，因此可以使用正则表达式拒绝匹配中的任何匹配项，

typescript
C#
python

您想要使用的负面展望必须这样写，

^(?!(?:typescript|C#|python)$).+$

Regex Demo

Answer 2

您不应该使用正则表达式，因为它是一个过大的技巧，请使用custom validator

export function usedNames(validNames: string[]): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (validNames.includes(control.value)) {
      return null;
    } else {
      return { usedNames: {value: control.value} };
    }
  };
}

用法（有效形式）：

new FormGroup({
  'language': new FormControl(this.hero.name, [
    Validators.required,
    usedNames(['typescript', 'C#', 'python']) // <-- Here's how you pass in the custom validator.
  ]),
  // ... (other inputs)
});

用法（模板形式）：

@Directive({
  selector: '[appUsedNames]',
  providers: [{provide: NG_VALIDATORS, useExisting: UsedNamesDirective, multi: true}]
})
export class UsedNamesDirective implements Validator {
  @Input('appUsedNames') usedNames: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.usedNames ? usedNames(this.usedNames)(control) : null;
  }
}

此外，您应该考虑将其设置为select而不是input，或者将list和<datalist>添加到输入中，以便用户知道他可以输入的内容。

RegEx不匹配多个确切的字符串

2 个答案: