Validate an URL

Question

Currently, I am using Angular 5. I tried to validate an URL as follows:

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>

In validate.ts file, I have this pattern:

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

But with the pattern, error message is shown even when a correct url is typed.

Answer 1

You can try this way, by slightly modifying and separating your regex:

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

From my own experience the quotes (") and slashes (/) can sometimes cause issues with the regex when passed directly into .pattern()

---

Here is a working Demo

Answer 2

Depending on your requirements, for example, if you don't want to deal with \ maintain aRegExp for an URL, you could delegate the work to the browser's built-in form validation facility.

It could be implemented like this:

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

Answer 3

I think this regex is more complete:

const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
this.form = this.fb.group({
      s_url: ['', [Validators.required, Validators.pattern(urlRegex)]],
    });

Please for pattern check here

Answer 4

You can also make use of the URL API, which has 95% support at the time of writing this answer. See the browser support here

urlValidator: ValidatorFn = (control: AbstractControl) => {
    let validUrl = true;

    try {
      new URL(control.value)
    } catch {
      validUrl = false;
    }

    return validUrl ? null : { invalidUrl: true };
  }

  searchControl = this.fb.control(null, this.urlValidator);