angular - Angular Reactive Form Validation：不允许小于现有数字的数字

Question

我有一个 Angular 反应形式的数字输入字段。

 <input id="referenceNumber" type="number" formControlName="referenceNumber" />
 <div *ngIf="form.referenceNumber.invalid && (form.referenceNumber.dirty || form.referenceNumber.touched)">
    <span *ngIf="form.referenceNumber.errors?.required">
       Please Enter a number.
    </span>
 </div>

我想在输入小于初始值的值时显示错误消息。我需要创建一个自定义验证器还是有更简单的方法来做同样的事情。

Answer 1

您在输入上设置初始值，并使用内置的 Validators.min 验证器。您将初始值设置为最小值。

var initialValue: number;

this.form = this.fb.group({
    referenceNumber: [initialValue. 
    Validators.min(initialValue),
    Validators.pattern(/^[1-9]\d*$/) ])
});

html

<span *ngIf="myForm.get('referenceNumber').errors.min">
     numberInputName cannot be more than {{ initialValue }}. 
</span>

<span *ngIf="myForm.get('referenceNumber').errors?.pattern">
 numberInputName must be greater than zero
</span>