angular - 使用响应式表单的 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

您需要将所有验证器放入数组中

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

代替

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

Answer 2

检查这个stackblitz ..这样你就可以解决问题。

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

Answer 3

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

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

检查这个工作stackblitz。