web-dev-qa-db-fra.com

Valider une URL

Actuellement, j'utilise Angular 5. J'ai essayé de valider une URL comme suit:

HTML:

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" placeholder="url">
  <error-display [displayError]="isValid('s_url')" errMsg="This field is required!"></error-display>
</div>

Dans validate.ts fichier, j'ai ce modèle:

s_url: new FormControl('', [
  Validators.required,
  Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")
]),

Mais avec le modèle, un message d'erreur s'affiche même lorsqu'une URL correcte est saisie.

angularformstypescript
6
Animay

Vous pouvez essayer de cette façon, en modifiant légèrement et en séparant votre expression régulière:

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
...
Validators.pattern(reg)

D'après ma propre expérience, les guillemets (") Et les barres obliques (/) Peuvent parfois causer des problèmes avec l'expression régulière lorsqu'ils sont passés directement dans .pattern()

Voici une démonstration

13
Michael Doye

En fonction de vos besoins, par exemple, si vous ne souhaitez pas traiter\maintenir un RegExp pour une URL, vous pouvez déléguer le travail à la fonction de validation de formulaire intégrée du navigateur.

Il pourrait être implémenté comme ceci:

const control: HTMLInputElement = document.createElement("input");
control.type = "url";
control.value = value;
const isValid: boolean = control.checkValidity();
3
Alexander Abakumov

Utilisez cette approche facile ..

installez cette bibliothèque.

npm install ng2-validation --save

N'oubliez pas ceci injectez ceci. Dans votre app.module.ts, importez-le dans votre tableau d'importation

import { CustomFormsModule } from 'ng2-validation'

Et dans votre tableau d'importation,

imports: [BrowserModule, FormsModule, CustomFormsModule],

Modifiez ensuite votre code comme ci-dessous

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" url placeholder="url">

  <div *ngIf="imageUrl.touched && imageUrl.invalid" >
     <div *ngIf="imageUrl.errors.required"> This field is required!</div>
     <div *ngIf="imageUrl.errors.url"> invalid URL </div>
  </div>

</div>
0
Ilthizam Imtiyas