找到用于最小值验证的自定义验证器。我们指令的选择器名称是 customMin。
custom-min-validator.directive.ts
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
@Directive({
selector: '[customMin][formControlName],[customMin][formControl],[customMin][ngModel]',
providers: [{provide: NG_VALIDATORS, useExisting: CustomMinDirective, multi: true}]
})
export class CustomMinDirective implements Validator {
@Input()
customMin: number;
validate(c: FormControl): {[key: string]: any} {
let v = c.value;
return ( v < this.customMin)? {"customMin": true} : null;
}
}
找到最大数量验证的自定义验证器。我们指令的选择器名称是 customMax。
custom-max-validator.directive.ts
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
@Directive({
selector: '[customMax][formControlName],[customMax][formControl],[customMax][ngModel]',
providers: [{provide: NG_VALIDATORS, useExisting: CustomMaxDirective, multi: true}]
})
export class CustomMaxDirective implements Validator {
@Input()
customMax: number;
validate(c: FormControl): {[key: string]: any} {
let v = c.value;
return ( v > this.customMax)? {"customMax": true} : null;
}
}
我们可以将 customMax 与 formControlName、formControl 和 ngModel 属性一起使用。
在模板驱动表单中使用自定义最小值和最大值验证器
我们将以模板驱动的形式使用自定义的最小和最大验证器。对于最小数量验证，我们有 customMin 属性，对于最大数量验证，我们有 customMax 属性。现在找到验证码sn-p。
<input name="num1" [ngModel]="user.num1" customMin="15" #numberOne="ngModel">
<input name="num2" [ngModel]="user.num2" customMax="50" #numberTwo="ngModel">
我们可以显示验证错误消息如下。
<div *ngIf="numberOne.errors?.customMin">
Minimum required number is 15.
</div>
<div *ngIf="numberTwo.errors?.customMax">
Maximum number can be 50.
</div>
要分配最小和最大数量，我们还可以使用财产投标。假设我们有以下组件属性。
minNum = 15;
maxNum = 50;
现在对 customMin 和 customMax 使用属性绑定，如下所示。
<input name="num1" [ngModel]="user.num1" [customMin]="minNum" #numberOne="ngModel">
<input name="num2" [ngModel]="user.num2" [customMax]="maxNum" #numberTwo="ngModel">