Regex 在Angular中没有空间验证器

我在我的项目中使用了10多个表单，其中包含许多输入字段。问题是我的字段将空格作为值。至于现在，我所做的是在更改时获取字段的值，并对其进行修剪，然后用0检查长度。如果是，抛出“不要使用空格”，否则取该值

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

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

但随着能量场或形态的增加，这将是一个令人头痛的问题。所以我试着把它作为公共模块。这样我就可以把它当作普通的服务了

注意：验证应以“HelloWorld”为借口进行，即“HelloWorld”应抛出错误，但“Hello World”不应抛出错误。 有人能给我一些解决这个问题的想法或建议吗

---

提前感谢

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

data.includes(" ")

---

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

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

data.includes(" ")

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

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);
)

如果您使用的是模板驱动的表单，则需要创建验证指令。只需按照下面的步骤操作即可

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);
)

如果您使用的是模板驱动的表单，则需要创建验证指令。只需按照下面的步骤操作即可

---

您采用什么formbuilder方法？如果您使用的是reactiveForms方法，那么您可以将验证器传递给表单字段，如果您想一起阻止空格：isSpace$event{let charCode=$event.which？$event.which:$event.keyCode；if charCode==32返回false；返回true；}，然后在输入时按keypress=isSpace$event，如果您想保留空格，我想也许可以添加一个自定义验证器，通过正则表达式检查空格等。听起来是创建自定义验证器的一个很好的用例。您采用什么formbuilder方法？如果您使用的是reactiveForms方法，那么您可以将验证器传递给表单字段，如果您想一起阻止空格：isSpace$event{let charCode=$event.which？$event.which:$event.keyCode；if charCode==32返回false；返回true；}，然后在输入时按keypress=isSpace$event，如果您想保留空格，我想也许可以添加一个自定义验证器，通过正则表达式检查空格等。听起来是创建自定义验证器的一个很好的用例。谢谢tomasz，但是你能帮我把它放在一个单独的模块里吗。因此，它将作为常规函数的所有组件的通用组件。您可以将它放在trim.validator.ts文件中，导出它，然后将它导入任何想要使用它的组件中。就像您使用内置验证器一样。它不需要是任何@NgModule的一部分。@很高兴我能提供帮助：您能将我的答案标记为解决方案吗？谢谢tomasz，但您能帮助我将其放在单独的模块中吗。因此，它将作为常规函数的所有组件的通用组件。您可以将它放在trim.validator.ts文件中，导出它，然后将它导入任何想要使用它的组件中。就像您使用内置验证器一样。它不需要是任何@NgModule的一部分。@很高兴我能提供帮助：你能把我的答案标记为解决方案吗？