Пользовательская проверка положительных чисел

Я пытался найти информацию, есть ли какие-либо встроенные валидаторы, которые проверяют, является ли ввод положительным числом?

Я пытался построить следующее:

static nonZero(control:Control) {
    if (Number(control.value) < 0) {
        control.setErrors({nonZero: true})
    } else {
    control.setErrors(null)
    }
}

Однако я не знал, как использовать его в моем конструкторе форм:

this.form = _formBuilder.group({
            field:['', Validators.required]})

Что я делаю неправильно?


person uksz    schedule 29.06.2016    source источник
comment
Вы также можете проверить это .   -  person Georgee Mathew Pappen    schedule 09.07.2021


Ответы (7)


Вы можете настроить его таким образом, используя метод Validators.compose:

this.form = _formBuilder.group({
        field:['', Validators.compose([
                     Validators.required, nonZero ])
        ]});

Это позволяет вам определить два синхронных валидатора для поля.

Изменить

Я бы реализовал валидатор следующим образом:

static nonZero(control:Control):{ [key: string]: any; } {
  if (Number(control.value) < 0) {
    return {nonZero: true};
  } else {
    return null;
  }
}
person Thierry Templier    schedule 29.06.2016
comment
На самом деле это выдает мне следующую ошибку: Аргумент типа '((control: Control) =› void)[]' не может быть назначен параметру типа 'ValidatorFn[]'. Тип «(control: Control) =› void» не может быть назначен типу «ValidatorFn». Тип 'void' не может быть присвоен типу '{ [key: string]: any; }'. - person uksz; 29.06.2016
comment
На самом деле я бы реализовал валидатор немного по-другому. Я обновил свой ответ... - person Thierry Templier; 29.06.2016

Небольшой рефакторинг:

 export function positiveNumberValidator(): ValidatorFn {
      return (control: AbstractControl): { [key: string]: any } => {
        const isNotOk = Number(control.value) < 0;
        return isNotOk ? { nonPositive: { value: control.value } } : null;
      };
 }

и если вы хотите использовать его в шаблоне как Directive:

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

@Directive({
  selector: '[prePositiveNumber]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PositiveNumberDirective, multi: true }]

})
export class PositiveNumberDirective implements Validator {

  validate(c: AbstractControl): { [key: string]: any; } {
    return positiveNumberValidator()(c);
  }
}

export function positiveNumberValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    const isNotOk = Number(control.value) < 0;
    return isNotOk ? { nonPositive: { value: control.value } } : null;
  };
}

Шаблон:

 <input type="number"
        class="full"
        name="shipmentVolume"
        required
        prePositiveNumber
        [(ngModel)]="someModel" />

При использовании в качестве Reactive forms можно использовать валидаторы compose, но можно использовать и без compose:

this.form = _formBuilder.group({
        field:['', Validators.required, positiveNumberValidator()] });
person Yerkon    schedule 27.03.2018

Вы можете комбинировать min Validator и Validator шаблона регулярного выражения:

 field: ['', [Validators.required, Validators.min(1), Validators.pattern('^(0|[1-9][0-9]*)$')]],
person user1233043    schedule 12.10.2018

Вы могли бы сделать что-то вроде,

.js

  orderFormGroup = new FormGroup({
    weight: new FormControl('', [Validators.required, Validators.min(0)])
  });

Это позволит меньше и равно равным нулю значениям, если вам нужны значения больше нуля, вы можете упомянуть Validators.min(0.1)

.html

  <input type="number" step="0.1" name="orderWeight" formControlName="weight" max="35" min="0" class="clr-input form-control">

Обратите внимание, что min="0" только гарантирует, что увеличение или уменьшение внешнего интерфейса не превысит 0. Фактическая проверка ввода обрабатывается в .js.

person Niveditha Karmegam    schedule 11.09.2019

Вы также можете использовать встроенный валидатор min с Number.MIN_VALUE, чтобы принять каждое положительное значение.

Например:

this.form = _formBuilder.group({
    field:['', [Validators.required, Validators.min(Number.MIN_VALUE)]]
});
person Fabrizio Rizzi    schedule 18.12.2019

Я бы использовал ту же методологию компоновки, но реализовал функцию min, которую вы тоже можете передать 1.

import { ValidatorFn, AbstractControl } from '@angular/forms';
export function min(min: Number): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      const input = control.value,
            isValid = input < min;
      if(isValid) 
          return { 'minValue': {min} }
      else 
          return null;
    };
}


this.pnFG = this.fb.group({
  pageNumberInput: [this.pageNumber, 
                    Validators.compose([
                        Validators.required,
                        min(1)
                    ])
                  ]
});
person JGFMK    schedule 22.10.2017

<input type="number" ng-model="size" name="size" min="0" max="10" integer />

Легко, как это!

person Andris    schedule 04.06.2018
comment
Привет @ user3564943 - Не могли бы вы добавить к своему ответу уточнение? Кроме того, это целочисленная директива, которую вы используете? npmjs.com/package/angular-integer - person jarodsmk; 06.06.2018