Angular中如何通过ElementRef的nativeElement校验带pattern的输入框有效性

你之前写的nativeElement.valid属于属性名错误，原生HTMLInputElement的校验结果存放在validity属性下，无需自己额外编写正则匹配逻辑，直接调用内置API即可完成校验：

方法1：通过validity属性判断 #

直接访问validity.valid即可获取布尔类型的校验结果，符合规则返回true，不符合返回false：

// 给ElementRef指定HTMLInputElement泛型可获得TS类型提示，避免属性写错
@ViewChild('password', {static: false}) password: ElementRef<HTMLInputElement>;

validate() {
  if(this.password.nativeElement.validity.valid) {
    // 校验通过后的业务逻辑
  } else {
    // 校验失败后的提示逻辑
  }
}

方法2：调用checkValidity()方法 #

如果需要触发浏览器自带的校验提示弹窗，可以调用checkValidity()方法，该方法会直接返回校验结果，同时校验失败时会触发input的invalid事件：

validate() {
  if(this.password.nativeElement.checkValidity()) {
    // 校验通过后的业务逻辑
  }
}

补充说明 #

• 你配置的static: false已经保证了只有视图渲染完成后才会获取到元素，因此在点击事件中调用不会出现空指针问题
• 如果需要判断具体的错误类型，可以访问validity下的对应属性：
  • patternMismatch：输入内容不符合pattern正则规则
  • tooShort：输入长度不足
  • valueMissing：必填项未输入内容

内容的提问来源于stack exchange，提问作者Package.JSON