Angular 自定义验证输入类型编号2

我想知道如何在angular2中设置最小值和最大值 当我们试图限制输入文本时，很简单，我们必须 有没有关于限制3个数字的想法

它可以完美地处理文本类型，但对于数字，我认为我们必须执行指令，提供一些验证器，如required、maxLength。。但您可以创建自己的验证程序，如下所示：

创建一个函数（这一个取你的控制值，检查它是否在0到100之间。如果可以，它返回null，这意味着没有问题，否则你返回一个valid到false的对象）

函数ValidateEnumber（c:FormControl）{
返回c.value>0&&c.value<100？null:{valid:false}
};

将您作为验证器的功能置于您的控制之下：

newformcontrol（“”，validateEnumber）

---

您还可以创建一些指令来管理验证器

HTML:

<input type="number" maxNumber="999"[(ngModel)]="element.orderItemNewCredit" #newCredit="ngModel">
<div *ngIf="newCredit.errors && (newCredit.dirty || newCredit.touched)" class="alert alert-danger">
    <div [hidden]="!newCredit.errors.maxNumber">New credit cannot be superior than 999/div>
</div>

新信用不能高于999/div>

指令：maxNumberValidator.Directive.ts

import {Directive, Input} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from "@angular/forms";

@Directive({
    selector: '[maxNumber]',
    providers: [{provide: NG_VALIDATORS, useExisting: MaxNumberValidatorDirective, multi: true}]
})

export class MaxNumberValidatorDirective implements Validator {
    @Input() maxNumber: number;

    constructor() { }

    validate(control: AbstractControl): ValidationErrors {
        return control.value <= this.maxNumber ? null : { maxNumber: { valid: false } };
    }
}

从'@angular/core'导入{指令，输入}；
从“@angular/forms”导入{AbstractControl，NG_VALIDATORS，ValidationErrors，Validator}；
@指示({
选择器：“[maxNumber]”，
提供者：[{提供：NG_验证器，使用现有的：MaxNumberValidatorDirective，multi:true}]
})
导出类MaxNumberValidatorDirective实现验证器{
@Input（）maxNumber:number；
构造函数（）{}
验证（控件：AbstractControl）：验证错误{
return control.value如果您使用
Validators
类执行验证，则需要编写自定义验证程序。请发布更多代码，以便我可以看到您执行验证的方式。如果您没有发布足够的代码，我将没有时间查看它，但此链接对我非常有用，我还需要做与您相同的事情ant to do:min=“1”max=“100”不起作用，如果我把100000作为例子，我更新了我的答案，这与你的问题更相关，我认为很好。效果很好。如果你想添加验证而不删除任何现有的验证，请使用以下命令：_fc.setValidations（validateEnumber）；（_fc是一个FormControl）。