Проверить URL

Question

В настоящее время я использую Angular 5. Я попытался проверить URL следующим образом:

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>

В validate.ts файле, у меня есть этот шаблон:

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}/")
]),

Но с шаблоном сообщение об ошибке отображается даже при вводе правильного URL.

Answer 1

В зависимости от ваших требований, например, если вы не хотите \ поддерживать RegExp для URL-адреса, вы можете делегировать работу встроенному в браузер средству проверки формы.

Это может быть реализовано так:

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

Answer 2

Вы можете попробовать этот способ, слегка изменив и отделив свое регулярное выражение:

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

По моему опыту, кавычки (") и косые черты (/) могут иногда вызывать проблемы срегулярное выражение при передаче непосредственно в .pattern()

---

Вот рабочая Демо