HTML5 Angular2表单-如何删除默认工具提示消息“请输入有效格式”并显示友好消息

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
<span class="error-message">请输入有效的邮箱地址</span>

.error-message {
  color: red;
  font-size: 12px;
}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  emailControl = new FormControl('');

  showErrorMessage() {
    if (this.emailControl.invalid) {
      return true;
    }
    return false;
  }
}

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" [formControl]="emailControl" />
<span class="error-message" *ngIf="showErrorMessage()">请输入有效的邮箱地址</span>