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')] 
    }); 

我有一个ValidationService我已经添加了一个功能“getValidatorErrorMessage”。

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

    return config[validatorName]; 
} 

我的模板有：

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

但对于一些奇怪的原因，如果我不按照正则表达式的代码验证消息的arent显示。您可以查看plunkr here。

Answer 1

那是因为你设置你的ControlMessagesComponent该输入场的条件必须是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消息立即显示。组合我最喜欢的是在两种情况下显示错误消息：当用户点击输入字段，然后单击其他地方或当用户开始打字时，可以通过以下条件实现：

if (this.control.errors.hasOwnProperty(propertyName) && 
    this.control.dirty || 
    this.control.touched)