Угловой 7: Formvalidation, Validators.pattern не работает

Question

Мне нужна проверка от только для совпадающих целых чисел.Поэтому я использую валидатор pattern с регулярным выражением (см. Ниже).Кроме того, поле не должно быть пустым, поэтому я добавил валидатор required.

Но ошибка pattern никогда не вызывается.Я прочитал угловые документы и посмотрел исходный код pattern, и он все еще не имеет смысла для меня.Кроме того, я прочитал почти каждый вопрос по стеку потока, связанный с этой темой.Но я до сих пор не могу понять, почему шаблон не работает.

Может быть, некоторые из вас, ребята, смогут мне помочь, спасибо!

Вот мой код 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 }

Answer 1

попробуйте таким образом, обычно я использую здесь 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 ??

Answer 2

он не работает с type = "number", если вы измените его на type = "text", он будет работать

Answer 3

Из документации required() имеет тип ValidationErrors, и вы пытаетесь создать FormControl с помощью constructor(any, ValidatorFn[]).

Вы пробовали использовать Validators.compose([Validators.pattern('^[0-9]*$'), Validators.required])?

Validators.compose() возвращает ValidatorFn, который можно использовать для создания FormControl.

Вы можете проверить этот ответ для примера и рабочего примера здесь.