web-dev-qa-db-ja.com

ホワイトスペース/空のスペースを検証する方法は？ [角度2]

angular 2形式で空白/空のスペースを避けたいですか？出来ますか？これをどのように行うことができますか？

angularvalidationtypescriptinput
30
Eusthace

たぶん、この記事はあなたを助けることができます 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));
            });

}
13
Bruno João

これを処理するカスタムバリデータを作成できます。

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>
90
Praveen M P

私がやったのは、trim（）を追加したことを除いて、minLengthに対してangularと同じことを行うバリデータを作成したことです

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で、angularが提供するminLength関数をオーバーライドしました。

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

これで、バリデータに組み込まれたangleのminLengthが使用されるすべての場所で、ヘルパーで作成したminLengthが使用されます。

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

ユーザーがAngular 6のテキストボックスにスペースを入力できないようにする

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

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

次に、コンポーネントのTypeScriptファイルで、たとえば次のようなバリデーターを使用します。

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

フォームの送信を回避するには、入力フィールドで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;
    }

}
3
Bruno João

これは私のために働いた以下のものとは少し異なる答えです：

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

入力フィールドからすべてのスペースを自動的に削除するには、カスタムバリデーターを作成する必要があります。

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

入力および貼り付けられたテキストで動作します。

1
c97

空白を防ぐためにformValueChanges関数を使用しました。必要な検証が空の文字列に対して機能した後、すべてのフィールドをトリミングするたびに。

ここみたいに：-

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

編集済み-

その場合、フォームコントロールで数値/整数を使用する場合、トリム関数は直接使用できません。

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

たくさんの試用の後、[a-zA-Z\\s]*が見つかりました。

例：

ニューヨーク

ニューデリー

0
md-5h04I3