Angular Реактивная проверка формы: не допускайте число меньше существующего - PullRequest
Новая
       36

Angular Реактивная проверка формы: не допускайте число меньше существующего

0 голосов
/ 08 марта 2020

У меня есть поле ввода цифр c в 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>

Я хочу показать сообщение об ошибке при вводе значения, меньшего, чем начальное значение. Нужно ли создавать собственный валидатор или есть более простой способ сделать то же самое?

1 Ответ

1 голос
/ 08 марта 2020

Вы устанавливаете начальное значение на своем входе и используете встроенный валидатор 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>
...