Angular 中没有 Space 个验证器

Question

我在我的项目中处理了 10 多个具有许多输入字段的表单。问题是我的字段将空格作为值。至于现在我所做的是获取更改字段的值和 trim 它并用 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

您可以尝试使用这样的 include

data.includes(" ")

如果字符串包含空格，它将 return 为真。

Answer 2

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

Angular 中没有 Space 个验证器

No Space Validator in Angular

regex

angular2-forms

angular-validation

angular

angular4-forms