Angular Validate field

Question

I need to validate the two fields such that the minimum value should be less than the maximum value. As the user types a value in the minimum score and if it is greater than the maximum score, error must be thrown.

<label class="col-2 col-form-label text-right font-weight-bold">Maximum Score*</label>
<div class="col-2">
  <input #firstScore="ngModel" [(ngModel)]="exams.firstScore" (keypress)="numberOnly($event)" name="firstScore" type="text">
</div>
<label class="col-3 col-form-label text-right font-weight-bold">Minimum Score*</label>
<div class="col-2">
  <input #secondScore="ngModel" [(ngModel)]="exams.secondScore" class="form-control" (keypress)="numberOnly($event)" name="secondScore" type="text"></div>
</div>

Adil Khalil · Accepted Answer · 2020-07-23 10:05:24Z

You can do something like

<label class="col-2 col-form-label text-right font-weight-bold">Maximum Score *</label>
<div class="col-2">
  <input #firstScore="ngModel" [(ngModel)]="exams.firstScore" (keypress)="numberOnly($event)" name="firstScore" type="text">
</div>
<label class="col-3 col-form-label text-right font-weight-bold">Manimum Score  *</label>
<div class="col-2">
  <input #secondScore="ngModel" [(ngModel)]="exams.secondScore" class="form-control" (keypress)="numberOnly($event)" name="secondScore" type="text"></div>
</div>
<span *ngIf="exams.secondScore > exams.firstScore">Your error message</span>

masao · Accepted Answer · 2020-07-23 10:18:42Z

1

You should define a custom validator for this template-driven form so that the form itself fails to be submitted. Please look this blog to instruct how to make the custom validator. You can handle it better with reactive form instead of the template-driven one.

answered Jul 23, 2020 at 10:18

masao

8955 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular Validate field

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related