В числовом вводе HTML с использованием реактивных форм вместо требуемого шаблона отображается ошибка валидатора

Question

Я работаю над приложением Angular 8 и следую подходу реагирующих форм. Столкнувшись с проблемой с числовым текстовым полем и скопировав пример кода ниже.

Машинопись:

this.sampleForm = this.formBuilder.group({
            age: ['', [Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]]
        });

HTML:

<div class="form-group">
                        <label>Age</label>
                        <input type="number" formControlName="age" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.age.errors }" />
                        <div *ngIf="submitted && f.age.errors" class="invalid-feedback">
                            <div *ngIf="f.age.errors.required">Age is required</div>
                             <div *ngIf="f.age.errors.pattern">invalid age value</div>
                        </div>
                    </div>

Пример значения ввода:

'- 035040958094385-3443-4355'

Ожидаемая ошибка проверки:

'недопустимое значение возраста'

Actualошибка проверки:

«Требуется возраст»

Answer 1

вам нужно поместить все валидаторы в массив

Age: ['', [Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]]

вместо

Age: ['', Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]

Answer 2

Ваше регулярное выражение должно выглядеть следующим образом: оно будет принимать возраст от 1 до 200. Взято из этого ответа.

age: ["", [Validators.required, Validators.pattern("(0?[1-9]|[1-9][0-9]|[1][1-9][1-9]|200)")]]

Проверьте это рабочее stackblitz .

Answer 3

Отметьте этот стек, чтобы решить проблему.

https://stackblitz.com/edit/angular-g9j46z?file=src%2Fapp%2Fapp.component.html