Question

我想知道如何在angular2中设置最小和最大数字当我们尝试限制输入文本时，我们必须非常简单关于限制3个数字的数量的任何想法

它在类型文本上工作得很好，但是我想我们必须做一个指令

Answer 1

Angular提供了一些 Validators ，例如 required ， maxLength ..但您可以像这样创建自己的Validator：

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

function validateNumber(c: FormControl) {
  return c.value > 0 && c.value < 100 ? null : {valid: false}
};

将您的功能作为验证器放在您的控件中： new FormControl('', validateNumber)

Answer 2

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

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>

指令：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 } };
    }
}

不要忘记将此指令添加到模块文件中。

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

2 个答案: