多个validator.pattern Angular 7的错误消息

Question

我有一个使用 angular 7 的反应形式，每个字段都有多个要验证的模式。 我想为每种模式制作一条错误消息，但我找不到识别它们的方法。

在我的 Ts 文件中，我有这样的内容：

myfield: ['', [ //Validators.pattern(/^/), Validators.pattern(/^/), Validators.pattern(/^/)]],

在我的html文件中；

<p class="error" *ngIf="myFormGroup.get('myField').hasError('pattern')"> pattern error</p>

我希望能够将我的每个模式分开以显示适当的错误消息，例如：

<p class="error" *ngIf="myFormGroup.get('myField').hasError('pattern1')"> pattern error 1</p>

<p class="error" *ngIf="myFormGroup.get('myField').hasError('pattern2')"> pattern error 2</p>

对此有什么想法吗？ 我的表单有很多字段、验证器和组件。 所以我正在寻找一种简单的方法。

Answer 1

模式验证器在其 ValidationErrors 对象中返回违反的模式。 所以你可以像这样利用它：

<p class="error" *ngIf="myFormGroup.get('myField').errors?.pattern">
  <ng-container *ngIf="myFormGroup.get('myField').errors.pattern.requiredPattern === pattern1">Pattern 1 Error</ng-container>   
   <ng-container *ngIf="myFormGroup.get('myField').errors.pattern.requiredPattern === pattern2">Pattern 2 Error</ng-container>
</p>

等等。 这里的一个限制是它一次只会返回一个违反模式，因为错误对象的性质是一次只能有一个模式违反的键控对象。 如果您需要一次显示多个模式错误，那么您将需要一个支持多个模式的自定义验证器。

Answer 2

您需要自定义验证器（ https://angular.io/guide/form-validation#custom-validators ）：

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: {message: string} } | null => {

    if (!new Regexp(/regexpPattern1Here/).test(control.value)) {
      return {
        pattern1Error: {
          message: `Error message for pattern 1`
        }
      };
    } 

    if (!new Regexp(/regexpPattern2Here/).test(control.value)) {
      return {
        pattern2Error: {
          message: `Error message for pattern 2`
        }
      };
    } 

   return null;
  };
}

而不是做

myfield: ['', [
        //Validators.pattern(/^/),
        Validators.pattern(/^/),
        Validators.pattern(/^/)]],

， 做

myfield: ['', [customValidator()]],

Answer 3

更新@bryan66的回答

由于这个答案的“建议的编辑队列已满”，我觉得我们需要一个更现代的 2022 年答案。所以这里是更新的答案：

首先我们需要修复我们组件的类

@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.css'],
})
export class ComponentName implements OnInit {
  public loginForm: FormGroup;
  public passwordSpecialChar = '!@#$&*';
  public passwordShouldContainsSpecialChar = /(?=.*[!@#$&*])/;
  public passwordShouldContainsOneLowercaseLetter = /(?=.*[a-z])/;
  
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      password: [
        '',
        Validators.compose([
          Validators.minLength(8),
          Validators.required,
          Validators.pattern(this.passwordShouldContainsSpecialChar),
          Validators.pattern(
            this.passwordShouldContainsOneLowercaseLetter,
          ),
        ]),
      ],
    });
  }
}

我们的模板会是这样的：

<div
  *ngIf="
    loginForm.get('password').invalid &&
    (loginForm.get('password').touched ||
    loginForm.get('password').dirty)
"
>
  <ul>
    <li
      class="text-danger"
      *ngIf="loginForm.get('password').hasError('required')"
    >
      Please enter your password
    </li>
    <li
      class="text-danger"
      *ngIf="loginForm.get('password').hasError('minlength')"
    >
      Password should be at least {{
      loginForm.get('password').errors['minlength'] .requiredLength }}
      characters.
    </li>
    <li
      class="text-danger"
      *ngIf="
        loginForm.get('password').errors['pattern']
        .requiredPattern ===
        passwordShouldContainsSpecialChar.toString()
    "
    >
      Password should contains {{ passwordSpecialChar }}
    </li>
    <li
      class="text-danger"
      *ngIf="
        loginForm.get('password').errors['pattern']
        ?.requiredPattern ===
        passwordShouldContainsOneLowercaseLetter.toString()
    "
    >
      Password should contains at least one lowercase letter
    </li>
  </ul>
</div>

免责声明

我仍然有这个问题，如果用户使用退格并且您检查了两个以上的模式，它会开始显示错误消息或不显示任何内容。 顺便说一句，如果你能修复它，请编辑我的消息。