空白/空白を検証する方法は？ [角度2]

Question

角度2のフォームで空白/空白を避けたいですか？ 可能ですか？ これはどのように行うことができますか？

Answer 1

たぶんこの記事はあなたにこのアプローチでは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)); 
      }); 

} 

Answer 2

フォームのサブミットを避けるには、入力フィールドにrequired attrを使用してください。

<input type="text" required>

または、フォームがsubmitedされると後

を提出し、あなたは空白を削除する）（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; 
    } 

} 

Answer 3

あなたがこれを処理するためのカスタムバリデータを作成することができます。コンポーネント

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

へとHTML

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

Answer 4

で

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

追加noWhitespaceValidator方法私は私が追加以外はminLengthのための角度としてsamethingをしたバリデータを作成されたました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; 
    } 
} 

私はその後、私のapp.component.tsで今すぐ至る所の角度はminLengthが、それはあなたがヘルパーに作成されていることは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; 
    } 
} 

によって提供さはminLength機能をオーバーライド。

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