HTML5 Angular2 表单 - 如何删除默认工具提示消息 "Please enter a valid format" 并显示友好消息

Question

我正在使用 Angular2 表单。大部分都使用 html 模式进行验证，有些是表单验证。对于 html 验证，我得到了 phone 的通用工具提示 "Please enter a valid format"，但没有说明格式。如何将其更改为 "Please enter 10 numeric values."

HTML代码

   <div class="row form-group">
             <div class="col-xs-12">
                <div class="float-label active">
                      <input type="text" class="input-underline-blue" id="phone" formControlName="phone"
                       placeholder="(123) 345-2222"
                        (keydown)="numOnlyDown($event)"
                         (keyup)="numOnlyUp($event)"
                             (blur)="phoneUSFormat($event)"
                            [maxlength]="14"
                         pattern="(?:\([1-9]\d{2}\)|\d{3})[- ]?\d{3}[- ]?\d{4}"               
                         required />
     <label for="phone">@Html.Sitecore().Field("Phone Label", profileItem)</label>
    <div *ngIf="!editInfoForm.get('phone').valid" class="alert alert-danger alert-small">
     <span *ngIf="editInfoForm.get('phone').hasError('required')">
                                                        @Html.Sitecore().Field("Phone Required", profileItem)
      </span>
      <span *ngIf="!editInfoForm.get('phone').hasError('required') && !editInfoForm.get('phone').valid">
      Enter a valid phone number.
         </span>
         </div>
   </div>
      </div>
   </div>

Answer 1

您可以在表单标签中使用 novalidate 属性来禁用默认验证。

...

HTML5 Angular2 表单 - 如何删除默认工具提示消息 "Please enter a valid format" 并显示友好消息

HTML5 Angular2 form - how to remove default tool tip message "Please enter a valid format" and display friendly message

html

angular2-routing

angular