Weboldal keresés

typescript - egyéni érvényesítés szám típusú mezőhöz angular 2

Szeretném tudni, hogyan lehet beállítani egy minimum és maximum számot Angular2-ben. Amikor megpróbálunk korlátozni egy szöveges bevitel értékét, ez nagyon egyszerű, csak annyit kell tennünk. Van valami ötlet a számok korlátozására, például 3 számra?

Tökéletesen működik szövegtípusnál, de számnál szerintem egy direktívát kellene használnunk

Válasz #1

Az Angular biztosít néhány Validator-t, mint például required, maxLength... de hozhatsz létre saját Validator-t is így:

  1. Hozzon létre egy függvényt (ez a függvény veszi a vezérlő értékét, ellenőrzi, hogy 0 és 100 között van-e. Ha rendben van, null értéket ad vissza, ami azt jelenti, hogy nincs probléma, különben egy objektumot ad vissza, amelynek valid értéke false).
function validateNumber(c: FormControl) {
  return c.value > 0 && c.value < 100 ? null : {valid: false}
};
  1. Állítsd be a függvényedet Validator-ként az irányítódban: new FormControl('', validateNumber)

Válasz #2

Készíthetsz néhány direktívát is az érvényesítőd kezelésére.

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>

Direktíva: 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 } };
    }
}

És ne felejtsd el hozzáadni ezt az utasítást a modulfájlodhoz.

Kapcsolódó cikkek