Angular 7：Formvalidation，Validators.pattern 不起作用答案

【问题标题】：Angular 7: Formvalidation, Validators.pattern not workingAngular 7：Formvalidation，Validators.pattern 不起作用
【发布时间】：2019-07-19 18:22:33
【问题描述】：

我需要一个来自仅匹配整数的验证。因此，我将patternvalidator 与正则表达式一起使用（见下文）。此外，该字段不应为空，因此我添加了 required 验证器。

但永远不会触发pattern 错误。我阅读了角度文档并查看了pattern 的源代码，但对我来说仍然没有意义。此外，我已经阅读了与该主题相关的几乎所有关于 stackoverflow 的问题。但我仍然无法弄清楚为什么该模式不起作用。

也许你们中的一些人可以帮助我，谢谢！

这是我的代码component.ts：

// definition of the formcontrol
hours = new FormControl('', [
  Validators.required,
  Validators.pattern('^[0-9]*$'),
])

// for debugging
log() {
  console.log('required: ', this.hours.hasError('required'));
  console.log('pattern: ', this.hours.hasError('pattern'));
  console.log('Erros: ', this.hours.errors);
}

模板：

<mat-form-field>
  <input matInput [formControl]="hours" (input)="log()"
    placeholder="Anzahl der ausbezahlten Überstunden" type="number">
  <mat-error *ngIf="hours.hasError('required') && !hours.hasError('pattern')">
    Anzahl der Überstunden fehlt!
  </mat-error>
  <mat-error *ngIf="!hours.hasError('required') && hours.hasError('pattern')">
    Anzahl muss eine Ganzzahl sein!
  </mat-error>
</mat-form-field>

例子inputValue="":

required: true
pattern: false
Error: Object { required: true }

inputValue="1":

required:  false
pattern:  false
Error:  null

inputValue="a":

required:  true
pattern:  false
Error: Object { required: true }

【问题讨论】：

^(0|[1-9][0-9]*)$ 在模式中使用此正则表达式将解决您的问题
感谢您的建议，但仍然是相同的行为。此外，这不是一个有效的模式，以匹配我的情况see here

标签： angular typescript angular7 angular-reactive-forms

【解决方案1】：

它不适用于 type="number"，如果您将其更改为 type="text" 它将起作用

【讨论】：

是的，我只是在写答案。

【解决方案2】：

试试这个方法，一般我这里用formBuilder

组件

 this.form = fb.group({
    age:[null , [Validators.required , Validators.pattern('[0-9]*')]]
  })

模板

<ng-container *ngIf="form.get('age').invalid && (form.get('age').touched || form.get('age').dirty)">
  <div *ngIf="form.get('age').hasError('required')">
    Required...
  </div>
  <div *ngIf="form.get('age').hasError('pattern')">
    Pattern Not valid
  </div>
</ng-container>

stackblitz demo ??

【讨论】：

【解决方案3】：

从documentation required() 是ValidationErrors 类型，您正在尝试使用constructor(any, ValidatorFn[]) 创建一个FormControl。

您尝试过使用Validators.compose([Validators.pattern('^[0-9]*$'), Validators.required]) 吗？

Validators.compose() 返回可用于创建 FormControl 的 ValidatorFn。

您可以查看此answer 以获取示例和工作示例here。

【讨论】：

我尝试了你的建议，但没有改变，还是一样。
@malbarmawi stackblitz 正在工作，如果它对您不起作用，那么两种解决方案的混合都可以。