多個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>

免責聲明

我仍然有這個問題，如果用戶使用退格並且您檢查了兩個以上的模式，它會開始顯示錯誤消息或不顯示任何內容。 順便說一句，如果你能修復它，請編輯我的消息。