How to show validation error message for custom validation in angular4 reactive forms

Question

In component I have created form using form builder: For contact Number feild I have added validation mobRegex and I want to show msg when pattern does not match.

Component snippet:

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);
}

In html I have contact field and markup is as below:

<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>

I want to show an error msg when mobRegx does not match.

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

Also can some one refer me some good article I can find built in rules/patterns for angular reactive forms?

Found a way: <div *ngIf="contactUsForm.get('contactNumber').hasError('pattern')"> Contact Number should be a valid phone number </div> Thanks to alligator.io/angular/reactive-forms-introduction — Always_a_learner
– Always_a_learner, Commented May 9, 2018 at 6:50

Komalpreet Singh · Accepted Answer · 2018-05-09 07:05:10Z

3

You Can find all the guidelines about the validations and usage of the reactive form from the following tutorial

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

and for applying pattern you can use validators.pattern()

https://angular.io/api/forms/PatternValidator for ex-

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

answered May 9, 2018 at 7:05

Komalpreet Singh

1651 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Always_a_learner Over a year ago

Thanks for help @komalpreet singh! :)

Collectives™ on Stack Overflow

How to show validation error message for custom validation in angular4 reactive forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related