Angular 4+: пользовательский валидатор и собственный выбор мин / макс стрелки - PullRequest
Новая
       32

Angular 4+: пользовательский валидатор и собственный выбор мин / макс стрелки

0 голосов
/ 17 октября 2018

Я пытаюсь добавить директиву динамический мин / макс , которая не позволяет вводить неправильные значения вручную И с помощью up/ стрелки вниз , основанные на моих значениях шаблона [min] и [max].

Отлично работает при вводе значений вручную, отображаются ошибки.Но я теряю нативное поведение, которое не позволяет набирать неправильные числа, используя стрелки вверх / вниз на входе ...

html пример: 

<input name="ph" type="number" [(ngModel)]="plotData.soilCharacteristics.ph.value" ngFormMinMax [min]="defaultPlotParameters.soil.ph.min" [max]="defaultPlotParameters.soil.ph.max"/>

код директивы: 

@Directive({
selector: '[ngFormMinMax]',
providers: [{ provide: NG_VALIDATORS, useExisting: WfNgMinMaxDirective, multi: true }]
})
export class WfNgMinMaxDirective implements Validator {
    @Input()
    ngModel: NgModel;

    _min: number;
    @Input()
    set min(value: number) {
        this._min = value;
    }

    _max: number;
    @Input()
    set max(value: number) {
        this._max = value;
    }

    validate(control: AbstractControl): ValidationErrors | null {
        if (control.value > this._max) {
            return { max: { invalid: true } };
        }

        if (control.value < this._min) {
            return { min: { invalid: true } };
        }
        return null;
    }
}

Поведение:

со значением [max], установленным на 10, я могу вручную ввести 11, и ошибка покажет, , но я также могу перейти к 11 с помощью стрелок вверх / вниз от ввода.При удалении директивы клавиша вверх / вниз блокируется до 10, как и ожидалось, но я теряю ручную проверку ...

Кажется, что поведение клавиши вверх / вниз по умолчанию переопределяется, есть ли способпредотвратить это?Я думал, что использование NG_VALIDATORSproviders было способом сделать это?

Спасибо

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Я добился проверки, используя реактивную форму с контролем формы и пользовательский валидатор.Нам нужно сохранить последнее значение успеха и обновить его в пользовательском интерфейсе.

https://stackblitz.com/edit/angular-homnk5?file=src%2Fapp%2Fapp.component.ts

В шаблоне вы можете отобразить сообщение об ошибке, используя name.errors? .Invalid

0 голосов
/ 17 октября 2018

Это основано на том, что у меня есть в рабочем коде, но вам придется его изменить: 

@HostListener('keydown', ['$event'])
public keydown(event: any): void {
  // Check for the value of the key pressed; if it is
  // the up or down keys then trigger the validation manually.
  this.form.updateValueAndValidity();
}

Это может помочь вам найти решение, специфичное для вашего кода.

...