angular - 如何在模板形式 Angular 2 中使用最小、最大验证

Question

这个问题已经有答案了:

Min / Max Validator in Angular 2 Final (20 个回答)

已关闭 6 年前。

我尝试在模板表单中使用最小验证，但它不起作用。如何以模板形式使用它？感谢您的帮助。

      <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>

Answer 1

要对 number 类型的输入使用最小/最大验证，您必须创建自定义验证器

您可以使用this图书馆。它实现了很多自定义验证器

在您的代码中包含上述库，您可以使用min/max，例如

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