Question

我想避免在我的角度2形式中使用空格/空格？可能吗？怎么办呢？

Answer 1

您可以创建自定义验证程序来处理此问题。

new FormControl(field.fieldValue || '', [Validators.required, this.noWhitespaceValidator])

将noWhitespaceValidator方法添加到组件

public noWhitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || '').trim().length === 0;
    const isValid = !isWhitespace;
    return isValid ? null : { 'whitespace': true };
}

并在HTML中

<div *ngIf="yourForm.hasError('whitespace')">Please enter valid data</div>

Answer 2

也许这篇文章可以帮助您http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

在这种方法中，您必须使用FormControl，然后监视值更改，然后将掩码应用于值。一个例子应该是：

...
form: FormGroup;
...


ngOnInit(){
    this.form.valueChanges
            .map((value) => {
                // Here you can manipulate your value
                value.firstName = value.firstName.trim();
                return value;
            })
            .filter((value) => this.form.valid)
            .subscribe((value) => {
               console.log("Model Driven Form valid value: vm = ",JSON.stringify(value));
            });

}

Answer 3

我做的是创建了一个验证器，它与minLength的角度相同，除了我添加了trim（）

import { Injectable } from '@angular/core';
import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';


@Injectable()
export class ValidatorHelper {
    ///This is the guts of Angulars minLength, added a trim for the validation
    static minLength(minLength: number): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } => {
            if (ValidatorHelper.isPresent(Validators.required(control))) {
                return null;
            }
             const v: string = control.value ? control.value : '';
            return v.trim().length < minLength ?
                { 'minlength': { 'requiredLength': minLength, 'actualLength': v.trim().length } } :
                null;
        };
    }

    static isPresent(obj: any): boolean {
        return obj !== undefined && obj !== null;
    }
}

然后我在我的app.component.ts中覆盖了angular提供的minLength函数。

import { Component, OnInit } from '@angular/core';    
import { ValidatorHelper } from 'app/common/components/validators/validator-helper';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {  
  constructor() { }

  ngOnInit(): void {       
    Validators.minLength = ValidatorHelper.minLength;
  }
}

现在使用了在验证器中内置的angular的minLength，它将使用你在帮助器中创建的minLength。

Validators.compose([
      Validators.minLength(2)         
    ]);

Answer 4

    export function noWhitespaceValidator(control: FormControl) {
       const isSpace = (control.value || '').match(/\s/g);
       return isSpace ? {'whitespace': true} : null;
}

使用

 password: ['', [Validators.required, noWhitespaceValidator]]

在template / html

中

<span *ngIf="newWpForm.get('password').hasError('whitespace')">
    password cannot contain whitespace
</span>

Answer 5

如果使用的是Angular Reactive Forms，则可以使用功能-验证程序创建文件。这将只允许输入空格。

import { AbstractControl } from '@angular/forms';
export function removeSpaces(control: AbstractControl) {
  if (control && control.value && !control.value.replace(/\s/g, '').length) {
    control.setValue('');
  }
  return null;
}

，然后在您的组件打字稿文件中使用像这样的验证器。

this.formGroup = this.fb.group({
  name: [null, [Validators.required, removeSpaces]]
});

Answer 6

防止用户在Angular 6的文本框中输入空格

<input type="text" (keydown.space)="$event.preventDefault();" required />

Answer 7

要避免使用表单子目录，只需在输入字段中使用required attr。

<input type="text" required>

或者，提交后

当表单被提交时，您可以使用str.trim（）从字符串的开头和结尾删除空格。我做了一个提交功能给你看：

submitFunction(formData){

    if(!formData.foo){
        // launch an alert to say the user the field cannot be empty
        return false;
    }
    else
    {
        formData.foo = formData.foo.trim(); // removes white 
        // do your logic here
        return true;
    }

}

Answer 8

这与以下对我有用的答案略有不同：

public static validate(control: FormControl): { whitespace: boolean } {
    const valueNoWhiteSpace = control.value.trim();
    const isValid = valueNoWhiteSpace === control.value;
    return isValid ? null : { whitespace: true };
}

Answer 9

以下指令可与Reactive-Forms一起使用以修剪所有表单字段，因此标准Validators.required可以正常工作：

@Directive({
  selector: '[formControl], [formControlName]',
})
export class TrimFormFieldsDirective {
  @Input() type: string;

  constructor(@Optional() private formControlDir: FormControlDirective, 
              @Optional() private formControlName: FormControlName) {}

  @HostListener('blur')
  @HostListener('keydown.enter')
  trimValue() {
    const control = this.formControlDir?.control || this.formControlName?.control;
    if (typeof control.value === 'string' && this.type !== 'password') {
      control.setValue(control.value.trim());
    }
  }
}

Answer 10

一种替代方法是使用Angular模式验证器并匹配任何非空白字符。

const nonWhitespaceRegExp: RegExp = new RegExp("\\S");

this.formGroup = this.fb.group({
  name: [null, [Validators.required, Validators.pattern(nonWhiteSpaceRegExp)]]
});

Answer 11

我有一个要求，其中名字和姓氏是用户输入，它们是必填字段，用户不应以空格作为第一个字符。

从node_modules导入AbstractControl。

import { AbstractControl } from '@angular/forms';

检查第一个字符是否为空格如果是，则将该值留空并返回要求：true。如果没有，则返回null

export function spaceValidator(control: AbstractControl) {
if (control && control.value && !control.value.replace(/\s/g, '').length) {
    control.setValue('');
    console.log(control.value);
    return { required: true }
}
else {
    return null;
}
}

如果第一个字符为空格，则上述代码将触发错误，并且不允许以空格作为第一个字符。

然后在表单构建器组中声明

this.paInfoForm = this.formBuilder.group({
        paFirstName: ['', [Validators.required, spaceValidator]],
        paLastName: ['', [Validators.required, spaceValidator]]
})

Answer 12

如果您在 Angular 2+ 中使用反应式表单，您可以在 (blur) 的帮助下删除前导和尾随空格

app.html

<input(blur)="trimLeadingAndTrailingSpaces(myForm.controls['firstName'])" formControlName="firstName" />

app.ts

public trimLeadingAndTrailingSpaces(formControl: AbstractControl) {
    if (formControl && formControl.value && typeof formControl.value === 'string') {
        formControl.setValue(formControl.value.trim());
    }
}

Answer 13

我认为一个简单而干净的解决方案是使用模式验证。

以下模式将允许以以空格开头的字符串，并且不允许仅包含空格的字符串< / strong>：

public class UserFeignClientInterceptor implements RequestInterceptor{ private static final String AUTHORIZATION_HEADER = "Authorization"; private static final String BEARER_TOKEN_TYPE = "Bearer"; @Override public void apply(RequestTemplate template) { SecurityContext securityContext = SecurityContextHolder.getContext(); Authentication authentication = securityContext.getAuthentication(); if (authentication != null && authentication.getDetails() instanceof OAuth2AuthenticationDetails) { OAuth2AuthenticationDetails details = (OAuth2AuthenticationDetails) authentication.getDetails(); template.header(AUTHORIZATION_HEADER, String.format("%s %s", BEARER_TOKEN_TYPE, details.getTokenValue())); } } }

可以在为表单组的相应控件添加验证器时进行设置：

/^(\s+\S+\s*)*(?!\s).*$/

Answer 14

在您的app.component.html

中

<form [formGroup]="signupForm">

           <input  type="text" name="name" [formControl]="signupForm.controls['name']"
              placeholder="First Name"
              required
            />
     <small
            *ngIf="signupForm.controls['name'].hasError('pattern')"
            class="form-error-msg"
            >First Name without space</small>

    </form>

在您的app.componen.ts文件中

import { Validators, FormGroup, FormControl } from "@angular/forms";
signupForm: FormGroup;
ngOnInit(){
this.signupForm = new FormGroup({
  name: new FormControl("", [
    Validators.required,
    Validators.pattern("^[a-zA-Z]+$"),
    Validators.minLength(3)
  ])
})

Answer 15

要自动从输入字段中删除所有空格，您需要创建自定义验证程序。

removeSpaces(c: FormControl) {
  if (c && c.value) {
    let removedSpaces = c.value.split(' ').join('');
    c.value !== removedSpaces && c.setValue(removedSpaces);
  }
  return null;
}

它适用于输入和粘贴的文本。

Answer 16

在hello.component.html

<input [formControl]="name" />
<div *ngIf="name.hasError('trimError')" > {{ name.errors.trimError.value }} </div>

在hello.component.ts

import { ValidatorFn, FormControl } from '@angular/forms';

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

export class AppComponent {
  control = new FormControl('', trimValidator);
}

Example Code

Answer 17

我已经使用form valueChanges函数来防止空格。每一个所需的验证之后，它将整理所有字段用于空白字符串。

就像这里：-

this.anyForm.valueChanges.subscribe(data => {
   for (var key in data) {
        if (data[key].trim() == "") {
          this.f[key].setValue("", { emitEvent: false });
        }
      }
    }

已编辑-

如果您在表单控件中使用任何数字/整数，在这种情况下修剪功能将无法直接使用像这样使用：

this.anyForm.valueChanges.subscribe(data => {
  for (var key in data) {
        if (data[key] && data[key].toString().trim() == "") {
          this.f[key].setValue("", { emitEvent: false });
        }
      }  
  }

Answer 18

要在输入中验证空白，您只需调用change事件并为此执行内联函数即可。

<input type="text" class="form-control"                     
            placeholder="First Name without white space in starting"
            name="firstName"
            #firstName="ngModel"
            [(ngModel)]="user.FirstName"
            (change) ="user.FirstName = user.FirstName.trim()"
            required/>

Answer 19

经过大量试验，我发现[a-zA-Z\\s]*是带有空格的字母数字

示例：

纽约

新德里

如何验证空格/空格？ [Angular 2]

19 个答案: