Angular4 FullNameフィールドバリデーターが期待どおりに動作しない

Question

角型4のレジスタフォームのフルネーム入力フィールドのカスタムバリデーターを作成しようとしていますが、それに応じて動作しません。 「スペースが許可されました」というメッセージが表示されます。ここで

は、私のバリデータのコードです：

import {AbstractControl, ValidationErrors} from '@angular/forms'; 

export class FullNameValidator { 

    static eachWordShouldBeginWithCapital(control: AbstractControl) : ValidationErrors | null { 
    let fullname = control.value as string; 
    for(let word of fullname.split(' ')) 
     if (word[0] == undefined || word[0] == word[0].toLowerCase()) 
     return {eachWordShouldBeginWithCapital: true}; 
    return null; 

    } 

    static onlyAlphabeticalCharactersAndSpaceAllowed(control: AbstractControl) : ValidationErrors | null { 
    let regex = '/^[a-zA-Z\\s]*$/'; 
    if (!(control.value as string).match(regex)) 
     return {onlyAlphabeticalCharactersAndSpaceAllowed: true}; 
    return null; 
    } 
} 

は、ここに私のテンプレートです：

import {Component, OnInit} from '@angular/core'; 
import {FormControl, FormGroup, Validators} from '@angular/forms'; 
import {FullNameValidator} from '../../common/validators/fullname-validator'; 
import {EmailValidators} from '../../common/validators/email-validators'; 
import {AuthService} from '../../services/data-services/auth.service'; 


@Component({ 
    selector: 'register', 
    templateUrl: './register.component.html', 
    styleUrls: ['./register.component.css'] 
}) 
export class RegisterComponent implements OnInit { 

    constructor(private authService: AuthService) { 
    } 

    form = new FormGroup({ 
    'fullname': new FormControl('', [ 
     FullNameValidator.eachWordShouldBeginWithCapital, 
     FullNameValidator.onlyAlphabeticalCharactersAndSpaceAllowed 
    ]), 
    'email': new FormControl('', [ 
     EmailValidators.shouldHaveEmailFormat 
    ]), 
    'password': new FormControl('', [ 
     Validators.minLength(6) 
    ]), 
    'passwordAgain': new FormControl(), 
    'dateOfBirth': new FormControl(), 
    'gender': new FormControl() 
    }); 

    ngOnInit() { 
    } 

    get fullname() { 
    return this.form.get('fullname'); 
    } 
} 

Answer 1

あなたの正規表現は、スペースを使用できません：

  <div class="form-group"> 
      <label class="control-label" for="signupName">Your name</label> 
      <input id="signupName" formControlName="fullname" type="text" class="form-control"> 
      </div> 
      <div class="alert alert-danger" *ngIf="fullname.touched && fullname.invalid"> 
      <div *ngIf="fullname.errors.eachWordShouldBeginWithCapital">Each word should begin with capital letter</div> 
      <div *ngIf="fullname.errors.onlyAlphabeticalCharactersAndSpaceAllowed">Only letters and spaces allowed</div> 
      </div> 

そして、ここでは私のコンポーネントのコードです。その理由は、\sとスペルミスがあり、\\sです。 この1つを^[a-zA-Z\s]*$として使用するとうまくいくはずです。