web-dev-qa-db-fra.com

Comment valider les espaces blancs/espaces vides? [Angulaire 2]

Je voudrais éviter les espaces blancs/espaces vides sous ma forme angulaire 2? Est-ce possible? Comment cela peut-il être fait?

angularvalidationtypescriptinput
13
Eusthace

Peut-être que cet article peut vous aider http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Dans cette approche, vous devez utiliser FormControl, puis surveiller les modifications de valeur, puis appliquer votre masque à la valeur. Un exemple devrait être:

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

}
11
Bruno João

Vous pouvez créer un validateur personnalisé pour gérer cela.

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

Ajouter la méthode noWhitespaceValidator à votre composant

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

et dans le HTML 

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

Ce que j'ai fait a été créé par un validateur qui fait le même chose comme angular pour minLength sauf que j'ai ajouté le 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;
    }
}

Dans mon app.component.ts, j’ai écrasé la fonction minLength fournie par 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;
  }
}

Maintenant, partout dans le validateur intégré de minLength d'angular, il utilisera la longueur minLength que vous avez créée dans l'aide.

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

Pour éviter la soumission de formulaire, utilisez simplement required attr dans les champs de saisie.

<input type="text" required>

Ou, après soumission 

Lorsque le formulaire est soumis, vous pouvez utiliser str.trim () pour supprimer les espaces blancs du début et de la fin d'une chaîne. J'ai fait une fonction d'envoi pour vous montrer:

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

}
2
Bruno João

Empêcher l'utilisateur de saisir un espace dans la zone de texte dans Angular 6

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

Si vous utilisez des formulaires réactifs angulaires, vous pouvez créer un fichier avec une fonction - un validateur. Cela ne permettra pas que les espaces soient entrés.

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

dans votre fichier TypeScript, utilisez ensuite le validateur comme celui-ci.

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

Voici une réponse légèrement différente de celle ci-dessous qui a fonctionné pour moi:

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

1
Christopher Grigg