Pattern Validator

Topic: Pattern Validator

bitjuice pro asked 5 years ago

Hi,

Pattern Validators in Template-driven forms does not seem to work: https://mdbootstrap.com/docs/angular/forms/validation/#template-pattern

Could you solve the problem please?

Thamks

Marco

Add comment

bitjuice pro answered 5 years ago

0 0 Best answer

Hi Darmian,

I'm using a regex to validate url (<a href="https://www.regextester.com/94502" rel="nofollow">https://www.regextester.com/94502</a>), but it desn't work

<pre class="prettyprint"><code><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">invalid url</mdb-error>
 <mdb-success *ngIf="cntwebsite.valid && (cntwebsite.dirty || cntwebsite.touched)" class="ml-40"></mdb-success>
</code></pre>

This is the error:

<img src="https://drive.google.com/file/d/1M2EU47bdb_pRQXydY4gp9RzUtkqhk1Ct/view?usp=sharing" alt="Error screenshot" title="">
<a href="https://drive.google.com/file/d/1M2EU47bdb_pRQXydY4gp9RzUtkqhk1Ct/view?usp=sharing" rel="nofollow">error link</a>

How can I fix it?

Thanks Marco

Please insert min. 20 characters.

Hi Darmian,

I'm using a regex to validate url (https://www.regextester.com/94502), 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