How to use min, max validation in template form angular 2

Question

I tried to use min validation in template form, but it didn't work. How to use it in template form? Thanks for your help.

      <input type="number" class="form-control" name="srvc_sub_cnt{{i}}" 
          [ngModel]="s?.srvc_sub_cnt" (ngModelChange)="s?.srvc_sub_cnt?
               s.srvc_sub_cnt=$event:null"
          required #srvc_sub_cnt="ngModel" pattern="^[0-9]+$" min="1">

        <div class="cell table-info" *ngIf="srvc_sub_cnt.errors?.min" class="form_error">
                    Service Subscribers must be greater than 0.
                  </div>

marked as duplicate, ping me if you disagree, but the dupe gives you the information you need. Even though that is talking about angular 2 final, things have not changed, in template driven form min/max does not work. Like in dupe, now min/max is supported in reactive forms, so you can consider going that route :) — AT82, Oct 28 '17 at 09:34

score 5 · Answer 1 · answered Oct 26 '17 at 19:08

5

To use min/max validations on input of type number you'll have to create Custom Validators

You can use this library. It implements a lot of custom validator

Including above library in your code, you can use min/max like

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p>

answered Oct 26 '17 at 19:08

Muhammad Usman

10,039
22
39

thank you. I found the answer in the above link. I will create a custom validator. – TinaZ Oct 30 '17 at 00:49
1

so give it a upvote and accept :p – Muhammad Usman Oct 30 '17 at 05:02
Hi Usman, thank you so much for the help. I found answer from dupe link. Thanks anyway. – TinaZ Oct 30 '17 at 19:48

How to use min, max validation in template form angular 2

1 Answers1

Linked