Как показать сообщение об ошибке проверки для пользовательской проверки в angular4 реактивных формах

Question

В компоненте я создал форму, используя конструктор форм: Для контактного номера я добавил валидацию mobRegex и хочу показать сообщение, когда шаблон не совпадает.

Фрагмент компонента:

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]+$');