Как проверить пробелы/пустое пространство? [Угловая 2]

Ответ 1

Возможно, эта статья поможет вам 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));
            });

}

Ответ 2

Вы можете создать собственный валидатор, чтобы справиться с этим.

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>

Ответ 3

Я создал валидатор, который сделал то же самое, что и angular для 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 переопределил функцию minLength, предоставляемую angular.

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

Ответ 4

Запретить пользователю вводить пробел в текстовом поле в Angular 6

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

Ответ 5

Чтобы избежать представления формы, просто используйте 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;
    }

}

Ответ 6

Если вы используете 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]]
});

Ответ 7

Это немного другой ответ на следующий, который работал для меня:

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

Ответ 8

Чтобы автоматически удалить все пробелы из поля ввода, вам нужно создать собственный валидатор.

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

Работает с введенным и вставленным текстом.

Ответ 9

После долгих испытаний я нашел [a-zA-Z\\s]* для буквенно-цифровых символов с пробелами

Пример:

Нью-Йорк

Нью-Дели

Ответ 10

  Я использовал функцию valueChanges формы для предотвращения пробелов. каждый время обрежет все поля после того, как требуемая проверка будет работать для пустой строки.

Как здесь: -

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

Edited --

если вы работаете с любым числом/целым числом в вашем элементе управления формы, в этом случае функция обрезки не будет работать напрямую использовать как:

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