使用反应形式的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'

预期的验证错误：

'无效年龄值'

实际验证错误：

'必须填写年龄'

Answer 1

您需要将所有Validators放入数组中

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

而不是

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

Answer 2

检查此堆栈闪电..这样可以解决问题。

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

Answer 3

您的正则表达式应如下所示：它将接受1到200之间的年龄。取自this答案。

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

检查此工作stackblitz。