在 Angular 中验证多个字符串

Question

我想验证输入类型文本中的一些字符串，如果字符串是蓝色、红色或绿色，则验证正确，否则不正确。我该如何验证？我试过了，但只适用于第一种颜色。

colorValidator():ValidatorFn {

    return (control: AbstractControl): { [key: string]: any } | null =>

        control.value === ( 'blue' || 'red' || 'green') ? null : {correctColor: control.value};

  }

我看到代码可以用来测试一个字符串，我认为它可以用来验证几个，但是它不起作用，我不知道该怎么做。

这是html表单：

<div class="form-group">
  <h4 class="error">{{message}}</h4>
   <form (ngSubmit)="createWine()" [formGroup]="wineForm">
    <div>
      <div>
       <input type="text" name="name" placeholder="Wine Name" formControlName="name">
      </div>
      <div class="error" *ngIf="(name.dirty || message) && name.invalid">
        <div *ngIf="name.errors['required']"> Insert color </div>
        <div *ngIf="name.errors['correctColor']">The color isn't valid
      </div>
    </div>

谢谢

Answer 1

您可以用这些颜色制作一个正则表达式并使用Validators.pattern(/blue|red|green/)

color: new FormControl('', {
  validators: [Validators.required, Validators.pattern(/\b(blue|red|green)\b(?!\s)/),
}),

像这个例子： https://stackblitz.com/edit/angular-ivy-zs3oxj?file=src/app/app.component.ts

或者如果你想要完全匹配： 使用 \b 作为单词边界： Validators.pattern(/\b(blue|red|green)\b/)

---

自定义验证函数，而不是 Regex 模式：

const colorValidator: ValidatorFn = (control: AbstractControl) => {
  const color = control.value;
  const validColors = ['blue', 'red', 'green'];
  if (validColors.some((validColor) => validColor === color)) return null;

  return {
    correctColor: 'Enter valid color',
  };
};

https://stackblitz.com/edit/angular-ivy-cqnjsu?file=src/app/app.component.ts