Question

在ionic3 angular应用程序中，我需要在用户键入时从电子邮件输入字段中修剪空格。为此，我创建了这样的指令：

    @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; 
}

希望这会有所帮助！

修剪空间的角度自定义指令有效，但验证失败

1 个答案: