webentwicklung-frage-antwort-db.com.de

Wie überprüfe ich Leerzeichen/Leerzeichen? [Winkel 2]

Ich möchte in meiner eckigen 2-Form weiße Leerzeichen/Leerzeichen vermeiden?

13
Eusthace

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

Bei diesem Ansatz müssen Sie FormControl verwenden, auf Wertänderungen achten und dann Ihre Maske auf den Wert anwenden. 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));
            });

}
11
Bruno João

Sie können einen benutzerdefinierten Prüfer erstellen, um dies zu handhaben.

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

Fügen Sie Ihrer Komponente die Methode noWhitespaceValidator hinzu

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

und im HTML 

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

Was ich gemacht habe, war ein Validator, der das gleiche als eckig für minLength machte, außer dass ich trim () hinzugefügt habe.

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 habe dann in meiner app.component.ts die von winkl bereitgestellte minLength-Funktion überschrieben

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 in der in den Validator eingebauten MinLength von winkl die von Ihnen erstellte MinLength verwendet.

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

Um die Formularübergabe zu vermeiden, verwenden Sie einfach required attr in den Eingabefeldern.

<input type="text" required>

Oder nach dem Absenden 

Wenn das Formular übermittelt wird, können Sie mit str.trim () Leerzeichen vom Anfang und Ende einer Zeichenfolge entfernen. Ich habe eine Submit-Funktion erstellt, um Ihnen zu 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;
    }

}
2
Bruno João

Verhindern, dass Benutzer Leerzeichen in Textfeld in Angular 6 eingeben

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

Wenn Sie Angular Reactive Forms verwenden, können Sie eine Datei mit einer Funktion erstellen - einem Prüfer. Dadurch können nicht nur Leerzeichen eingegeben werden.

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

und dann in Ihrer Component-TypeScript-Datei den Validator zum Beispiel verwenden.

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

Dies ist eine etwas andere Antwort als eine, die für mich funktioniert hat:

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

1

Um automatisch alle Leerzeichen aus dem Eingabefeld zu entfernen, müssen Sie einen benutzerdefinierten Validator erstellen.

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

Es funktioniert mit eingegebenem und eingefügtem Text.

1
c97

ich habe Form ValueChanges-Funktion verwendet, um Leerzeichen zu verhindern. Jedes Mal, wenn alle Felder nach dieser erforderlichen Überprüfung abgeschnitten werden, funktioniert dies für eine leere Zeichenfolge.

Wie hier:-

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

Bearbeitet -

wenn Sie mit einer Zahl/Ganzzahl in Ihrer Formularsteuerung arbeiten, funktioniert die Trimmfunktion in diesem Fall nicht direkt wie folgt:

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

Nach vielen Versuchen fand ich [a-zA-Z\\s]* für alphanumerische Zeichen mit Leerzeichen

Beispiel:

New York

New Delhi

0
md-5h04I3