угловая пользовательская директива для обрезки пробелов работает, но проверка не проходит

Question

В моем угловом приложении ionic3 мне нужно обрезать пробелы в поле ввода электронной почты, пока пользователь печатает.Для этого я создал следующую директиву:

    @Directive({
  selector: '[no-space]',
  host: {
    "(input)": 'onInputChange($event)'
  }
})
export class NoSpaceDirective{
  onInputChange($event){
    $event.target.value = $event.target.value.trim();
  }
}

директива работает, однако валидация не работает правильно: валидация не допускает пробелов в значении;когда я набираю пробел, он обрезается директивой, но проверка завершается неудачно, как будто пробел не виден, но все еще там.

Answer 1

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

@Directive({
  selector: '[no-space]',
  host: {
    "(input)": 'onInputChange($event)'
  }
})
export class NoSpaceDirective{
  if ($event.key === ' ' || $event.key === 'Spacebar') {
    // ' ' is standard, 'Spacebar' was used by IE9 and Firefox < 37
    return false; //preventing type space character
    console.log('Space pressed')
  } else {
      return true; 
}

Надеюсь, это поможет!