Angular 反应式表单验证：不允许数字小于现有数字

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>

Angular 反应式表单验证：不允许数字小于现有数字

Angular Reactive Form Validation: Do not allow a number less than existing number

angular

angular-reactive-forms

angular2-form-validation