Angular中没有空格验证器

Question

我在我的项目中使用了许多输入字段来处理超过10个表单。问题是我的字段将空格作为值。至于现在，我所做的是获取字段的值以进行更改并修剪它并使用0检查长度。如果是，则抛出'不使用空格'，否则取值。

<input (change)='check($event)'>

check(data){
   if(data.trim() === 0 ){
       console.log('contains empty spaces'   
   }else{
        console.log('contains data') 
   }
}

但随着场地或形式的增加，这将是一个令人头疼的问题。所以我试图将其作为通用模块。所以我会像服务一样使用它。

注意：验证应该在借口上进行（即）'HelloWorld'应该抛出错误，但'Hello World'不应该。谁能给我一些想法或建议来解决这个问题..

提前致谢

Answer 1

trim.validator.ts

export const trimValidator: ValidatorFn = (control: FormControl) => {
  if (control.value.startsWith(' ')) {
    return {
      'trimError': { value: 'control has leading whitespace' }
    };
  }
  if (control.value.endsWith(' ')) {
    return {
      'trimError': { value: 'control has trailing whitespace' }
    };
  }
  return null;
};

在任何想要使用trim.validator.ts的组件中

import { trimValidator } from 'path/to/trim.validator'.ts

ctrl: FormControl;

ngOnInit() {
  this.ctrl = new FormControl('', trimValidator);
)

如果您使用的是模板驱动表单，则需要创建验证指令。只需按照official documentation的步骤

Live demo

Answer 2

您可以尝试使用这样的包含

data.includes(" ")

如果字符串包含空格，它将返回true。