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>

但是由于一些奇怪的原因，如果我不遵循正则表达式代码，则验证消息不会显示。

您可以查看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)

angular2 - 为表单构建器添加“模式”

1 个答案: