Как запустить проверку входных данных формы при первом изменении в Angular

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

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

Изначально поле чистое и пустое:

введите описание изображения здесь

затем пользователь фокусирует ввод и вводит некоторые данные:

введите описание изображения здесь

несмотря на то, что вставленное значение недействительно (потому что это не целое число), проверка еще не запущена. Он будет запущен, как только пользователь покинет фокус (например, нажав TAB или сфокусируясь на другом вводе):

введите описание изображения здесь

С этого момента проверка будет запускаться при каждом изменении.

Поэтому, если теперь пользователь вернется к полю и вставит допустимое значение, валидатор немедленно выполнит свою работу:

введите описание изображения здесь

введите описание изображения здесь

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


person Francesco Borzi    schedule 08.01.2018    source источник


Ответы (1)


Я думаю, что это нормально, если вы прикрепите валидаторы прямо во время создания формы в компоненте.

Ex:

this.myReactiveForm  = new FormGroup({
  'name': new FormControl(this.user.name, [
    Validators.required,
    Validators.minLength(4)
  ]),

здесь, как только имя пользователя станет длиннее 4 символов, вы увидите сообщение.

person nircraft    schedule 08.11.2018