如何以 angular4 反应形式显示自定义验证的验证错误消息答案

【问题标题】：How to show validation error message for custom validation in angular4 reactive forms如何以 angular4 反应形式显示自定义验证的验证错误消息
【发布时间】：2018-05-09 06:45:48
【问题描述】：

在组件中，我使用表单生成器创建了表单：对于联系人号码字段，我添加了验证 mobRegex，并且我想在模式不匹配时显示 msg。

组件 sn-p：

createForm(): void {
    this.contactUsForm = this.fb.group({
        'name': ['', Validators.required],
        'email': ['', Validators.compose([
            Validators.required,
          //  Validators.pattern(this.emailRegex)])],
            Validators.email])],
        'queryType': [null, Validators.required],
        // 'date': ['', Validators.compose([ValidationService.spaceValidator, Validators.required])],
        //'subject': ['', Validators.required],
        'subject': ['', Validators.compose([
          Validators.required,
          Validators.maxLength(100)])],
       // 'message': ['', Validators.required],
        'message': ['', Validators.compose([
          Validators.required,
          Validators.maxLength(1024)])],
        'contactNumber': ['', Validators.compose([
          Validators.required,
          Validators.pattern(this.mobRegx)])]
    });
//     if (this.queries.selected.type.toLowerCase() == 'schedule-a-call')
//         this.contactUsForm.addControl('timeSlot', new FormControl('timeSlot', Validators.required);
}

在 html 中，我有联系字段，标记如下：

<div class="form-group">

  <input
  type="text"
  class="form-control input-lg"
  id="contactNumberInput"
  placeholder="Contact Number"
  formControlName="contactNumber"
  [formControl]=" contactUsForm.controls['contactNumber']"
  [(ngModel)]="support.contactNumber"
  required>


<div *ngIf="contactUsForm.get('contactNumber').touched && 
contactUsForm.get('contactNumber').invalid">
<div *ngIf="contactUsForm.get('contactNumber').hasError('required')">
   Contact Number is requied
 </div>
<div *ngIf="contactUsForm.get('contactNumber').hasError(mobRegx)">
  Contact Number should be a valid phone number  // This part is not working
</div>

我想在 mobRegx 不匹配时显示错误消息。

mobRegx = /^(+\d{1,3}[- ]?)?\d{10}$/;

也有人可以向我推荐一些我可以找到的角反应形式内置规则/模式的好文章吗？

【问题讨论】：

找到了方法：
联系电话应该是有效的电话号码
感谢@ 987654321@

标签： angular angular-reactive-forms angular-forms angular-validation

【解决方案1】：

您可以从以下教程中找到有关反应式表单验证和使用的所有指南

https://angular.io/guide/reactive-forms

对于应用模式，您可以使用 validators.pattern()

https://angular.io/api/forms/PatternValidator 例如-

Validators.pattern('^[a-zA-Z]+$');

【讨论】：

感谢@komalpreet singh 的帮助！ :)