Topic: Pattern Validator

bitjuice pro asked 5 years ago


Pattern Validators in Template-driven forms does not seem to work:

Could you solve the problem please?



bitjuice pro answered 5 years ago

Hi Darmian,

I'm using a regex to validate url (, but it desn't work

<input type="text" [(ngModel)]="contacts.webSite" class="form-control" placeholder="Sito web personale" #cntwebsite="ngModel"
        aria-label="Sito web personale" name="cntwebsite" [pattern]="'/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm'">
        <mdb-error *ngIf="cntwebsite.invalid && (cntwebsite.dirty || cntwebsite.touched)" class="ml-40"><i class="fas fa-exclamation mr-1"></i>invalid url</mdb-error>
        <mdb-success *ngIf="cntwebsite.valid && (cntwebsite.dirty || cntwebsite.touched)" class="ml-40"><i class="fas fa-check"></i></mdb-success>

This is the error:

Error screenshot error link

How can I fix it?

Thanks Marco

Arkadiusz Idzikowski staff commented 5 years ago

It looks like there are some problems with regex code. Please check whether there are no missing or unnecessary characters.

In order to turn on MDB validation you need to add mdbValidate directive to the input element.

Damian Gemza staff answered 5 years ago

Dear Marco,

Please use this pattern instead that one from documentation. We'll fix this in our docs.


Best Regards,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: PC
  • Browser: Chorme
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes