Question

我只需要一个from验证来匹配整数。首先，我将pattern验证器与正则表达式结合使用（请参见下文）。另外，该字段不能为空，因此我添加了required验证器。

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

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

这是我的代码组件。

// 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 }

Answer 1

在documentation中，required()的类型为ValidationErrors，而您正在尝试使用constructor(any, ValidatorFn[])创建FormControl。

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

Validators.compose()返回一个ValidatorFn，可用于创建FormControl。

您可以查看此answer的示例和有效示例here。

Answer 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

Answer 3

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

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

3 个答案: