validação - Como validar espaços em branco/espaços vazios? [Angular 2]

Eu gostaria de evitar espaços em branco/espaços vazios no meu formulário Angular 2. Isso é possível? Como isso pode ser feito?

Resposta #1

Você pode criar um validador personalizado para lidar com isso.

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

Adicione o método noWhitespaceValidator ao seu componente

public noWhitespaceValidator(control: FormControl) {
    return (control.value || '').trim().length? null : { 'whitespace': true };       
}

e no HTML

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

Resposta #2

Eu acho que uma solução simples e limpa é usar a validação de padrão.

O seguinte padrão permitirá uma string que começa com espaços em branco e não permitirá uma string contendo apenas espaços em branco:

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

Isso pode ser definido ao adicionar os validadores para o controle correspondente do grupo de formulários:

const form = this.formBuilder.group({
            name: ['', [
                Validators.required,
                Validators.pattern(/^(\s+\S+\s*)*(?!\s).*$/)
            ]]
        });

Resposta #3

Talvez este artigo possa ajudá-lo http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Nesta abordagem, você precisa usar FormControl, depois observar as mudanças de valor e então aplicar sua máscara ao valor. Um exemplo seria:

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

}

Resposta #4

Impedir o usuário de digitar espaço em uma caixa de texto no Angular 6

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

Resposta #5

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

usar

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

Em template/html

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

Resposta #6

Se você está usando Formulários Reativos do Angular, você pode criar um arquivo com uma função - um validador. Isso não permitirá que apenas espaços sejam inseridos.

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

e então, no arquivo TypeScript do seu componente, use o validador assim, por exemplo.

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

Resposta #7

Uma alternativa seria usar o validador de padrão do Angular e corresponder a qualquer caractere que não seja espaço em branco.

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

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