angular2 - 추가 '패턴'폼 빌더

Question

에 나는 양식 빌더 패턴을 가지고 있고이 있습니다

this.userForm = this.formBuilder.group({ 
     'postalCode': ['', Validators.pattern('/[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]/i')] 
    }); 

가 나는 기능 "getValidatorErrorMessage"을 추가 한 ValidationService을 가지고 있습니다.

<div> 
     <label for="postalCode">Postal code (A1A 2J3)</label> 
     <input formControlName="postalCode" id="postalCode" /> 
     <control-messages [control]="userForm.controls.postalCode"></control-messages> 
    </div> 

을하지만 정규식 코드에 따라 해달라고하면 어떤 이상한 이유로, 유효성 검사 메시지가 표시이 arent :

static getValidatorErrorMessage(validatorName: string, validatorValue?: any) { 
    let config = { 
     'pattern': 'invalid pattern' 
    }; 

    return config[validatorName]; 
} 

내 템플릿이 있습니다.

plunkr here을 볼 수 있습니다. 오류 메시지가 표시 될 때까지 당신이 당신의 ControlMessagesComponent 해당 입력 필드에 조건을 설정하기 때문이다

Answer 1

순서대로 touched을 수 있습니다

get errorMessage() { 
    for (let propertyName in this.control.errors) { 
     if (this.control.errors.hasOwnProperty(propertyName) && 
      this.control.touched) { // this line 
     return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]); 
     } 
    } 
    return null; 
} 

당신은 당신이 입력 this.control.touched, 유효성 검사가 수행됩니다 제거합니다. 그러나 이로 인해 required 메시지가 바로 표시됩니다. 내가 가장 선호하는 조합은 사용자가 입력 필드를 클릭 한 다음 다른 곳을 클릭하거나 다음 조건으로 달성 할 수있는 입력을 시작할 때 오류 메시지를 표시하는 것입니다.