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

  selector: '[min]',

  providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]

})

export class MinDirective implements Validator {

  @Input() min: number;

  validate(control: AbstractControl): { [key: string]: any } {

    return Validators.min(this.min)(control)

    // or you can write your own validation e.g.

    // return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null

  }

}