Angular 2 Final中的最小/最大验证器

Question

根据thinkgram.io，当前支持的验证器为：

需要

最小长度

最长长度

图案

因此，请考虑以下代码（此处为plunkr）：

@Component({

  selector: 'my-app',

  template: `

  <form #formRef="ngForm">

    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>

    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>

    <button type="submit"> Submit </button> 

  </form>

  FORM: {{formRef.form | json }}

`

})

export class AppComponent { 

  firstValue = -22;

  secondValue = "eyy macarena!"; 

}

虽然minlength受支持，但min="0"角度验证将忽略它：

因此，当firstValue ngModel <0时，要使表单导致错误，是否需要构建自定义验证器？

Answer 1

我发现一个实现许多自定义验证器的库-ng2-validation-可与模板驱动的表单（属性指令）一起使用。例：<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/><p *ngIf="someNumber.errors?.range">Must be in range</p>

Answer 2

通过创建实现该Validator接口的指令，您可以轻松实现自己的验证（模板驱动）。import { Directive, Input, forwardRef } from '@angular/core'import { NG_VALIDATORS, Validator, AbstractControl, Validators } from '@angular/forms'@Directive({&nbsp; selector: '[min]',&nbsp; providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]})export class MinDirective implements Validator {&nbsp; @Input() min: number;&nbsp; validate(control: AbstractControl): { [key: string]: any } {&nbsp; &nbsp; return Validators.min(this.min)(control)&nbsp; &nbsp; // or you can write your own validation e.g.&nbsp; &nbsp; // return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null&nbsp; }}