Question

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

组件摘要

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} $ /;

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

Answer 1

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

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

并且对于应用模式，您可以使用validators.pattern（）

https://angular.io/api/forms/PatternValidator 对于前 -

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

如何在angular4反应形式中显示自定义验证的验证错误消息

1 个答案: