Wie validieren Sie weiße Leerzeichen/leere Leerzeichen? [Angular 2]

Question

Ich möchte weiße Leerzeichen/Leerstellen in meiner eckigen 2 Form vermeiden? Ist es möglich? Wie kann das gemacht werden?

Answer 1

Vielleicht kann dieser Artikel helfen Ihnen http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Bei diesem Ansatz haben Sie Formcontrol verwenden, dann für Wertänderungen beobachten und dann die Maske auf den Wert anzuwenden. Ein Beispiel sollte sein:

... 
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 2

Um die Formularerstellung zu vermeiden, verwenden Sie einfach required attr in den Eingabefeldern.

<input type="text" required>

Oder sendet nach

Wenn das Formular übergeben, können Sie str.trim() verwenden, weiße Flächen entfernen Form einer Zeichenfolge beginnen und enden. Ich habe eine Funktion unterbreiten Ihnen zeigen:

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 3

Sie können einen benutzerdefinierten Validierer erstellen, um dies zu behandeln.

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

Add noWhitespaceValidator Verfahren zu Ihrer Komponente

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

und im HTML-

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

Answer 4

Was ich tat ein Validator erstellt wurde, den Samething als Winkel für minLength tat, außer ich das addierte trimmen()

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

ich dann in meinem app.component.ts overrode die Winkel vorgesehen minLength Funktion von

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

Jetzt wird überall Winkel des minLength in Validator baute es die minLength verwenden, die Sie im Helfer erstellt haben.

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