Проверка шага номера типа ввода - Проверка пользовательской формы

Question

У меня есть приложение Angular, которое использует реактивную форму. Одно из моих полей ввода имеет тип номера, и я использую директиву step для определения допустимых значений следующим образом:

steps = 0.25
myForm: FormGroup

constructor(private fb: FormBuilder) {
  myForm = this.fb.group({
      numberControl: new FormControl(null)
  });

---

<input type="number" step="{{steps}}" formControlName="numberControl">

Свойство step может быть изменено на основе на другом входе приложения, но для простоты я не включил это в этот пример. Моя проблема здесь в том, что форма всегда действительна. Этот шаг работает, когда я использую стрелки вверх и вниз в поле ввода, но я могу ввести любое значение вручную, и оно все равно будет действительным.

Пример Stackblitz: https://stackblitz.com/edit/angular-rhyeeb

Любая помощь приветствуется!

Answer 1

Вам необходимо самостоятельно выполнить пользовательскую проверку.

import { AbstractControl } from '@angular/forms';

function stepsValidator(control: AbstractControl) {
    if (!control.value || control.value % this.steps !== 0) {
        return { error: true };
    }
    return null;
}

И затем в объявлении formControl

myForm = this.fb.group({
    numberControl: new FormControl(null, this.stepsValidator.bind(this))
});

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

Answer 2

По умолчанию поля ввода numner не проверяются, если число, введенное пользователем вручную, делится на счетчик шагов. Если вам нужна такая функция, вам нужно реализовать собственный валидатор, который довольно прост.

Все, что вам нужно сделать, - это создать функцию для проверки поля ввода чисел, а затем включить вновь созданный валидатор в массив Validators объекта FormControl. Ваша функция валидатора должна либо возвращать значение null при прохождении пользовательского проверочного теста, либо возвращать карту пар ключ-значение с подробным описанием причины сбоя.

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

export class AppComponent implements OnInit {
  steps = 0.25;
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      numberControl: new FormControl(null, [
        Validators.required,
        this.validateNumField.bind(this)
      ])
    });

    this.myForm.valueChanges.subscribe(_ => {
      if (!this.myForm.valid) {
        console.log('err msg -> ', this.myForm.get("numberControl").errors);
      }
    });
  }

  validateNumField(control: AbstractControl): { [key: string]: any } {
    let rem = control.value && Number.parseFloat(control.value) % this.steps;
    // console.log(rem);

    /**
    * If the remainder is not 0 then user has entered an invalid value
    */
    return rem ? { error: "Not a valid step" } : null;
  }
}

Теперь ваша кнопка отправки не будет работать, если она не является допустимым шагом. Вы можете go вперед и показать сообщение об ошибке в шаблоне, если хотите использовать свойство this.myForm.get("numberControl").errors.

Рабочий пример можно найти в stackblitz здесь . Для получения дополнительной информации о пользовательской проверке посетите Angular документы .

Редактировать: Обновленный ответ для захвата изменения в шагах.