urlValidator & httpsValidator

The urlValidator and httpsValidator functions are Angular validators used to check if a given string adheres to specific URL patterns. The urlValidator validates URLs starting with http or https, while httpsValidator validates only HTTPS URLs. These validators can be utilized in Angular Reactive Forms to ensure the validity of user-entered URLs.

Examples

Example 1: URL Validator

Validate URLs that start with http or https:

import {urlValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div>
        <label>URL</label>
        <input type="text" formControlName="url" />
        @if (form.controls.url.hasError('required')) {
          <div>Required</div>
        }
        @if (form.controls.url.errors?.['invalidUrl']) {
          <div>Please enter a valid URL</div>
        }
      </div>
    </form>
  `
})
export class UrlValidatorExampleComponent {
  form = new FormGroup({
    url: new FormControl('', [Validators.required, urlValidator]),
  });
}

Example 2: HTTPS Validator

Validate only HTTPS URLs:

import {httpsValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div>
        <label>Https-only URL</label>
        <input type="text" formControlName="https" />
        @if (form.controls.https.hasError('required')) {
          <div>Required</div>
        }
        @if (form.controls.https.hasError('invalidUrl')) {
          <div>Please enter a https URL</div>
        }
      </div>
    </form>
  `
})
export class HttpsValidatorExampleComponent {
  form = new FormGroup({
    https: new FormControl('', [Validators.required, httpsValidator]),
  });
}

Example 3: Complete Form Example

Complete example with both validators:

import {httpsValidator, urlValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div>
        <label>URL</label>
        <input type="text" formControlName="url" />
        @if (form.controls.url.hasError('required')) {
          <div>Required</div>
        }
        @if (form.controls.url.errors?.['invalidUrl']) {
          <div>Please enter a valid URL</div>
        }
      </div>

      <div>
        <label>Https-only URL</label>
        <input type="text" formControlName="https" />
        @if (form.controls.https.hasError('required')) {
          <div>Required</div>
        }
        @if (form.controls.https.hasError('invalidUrl')) {
          <div>Please enter a https URL</div>
        }
      </div>
    </form>
  `
})
export class UrlValidatorComponent {
  form = new FormGroup({
    url: new FormControl('', [Validators.required, urlValidator]),
    https: new FormControl('', [Validators.required, httpsValidator]),
  });
}

API Reference

urlValidator

Angular validator that checks if a string is a valid URL starting with http or https.

Signature

urlValidator(control: AbstractControl): ValidationErrors | null

Returns

A validator function that returns {invalidUrl: true} if the URL is invalid, or null if valid.

httpsValidator

Angular validator that checks if a string is a valid HTTPS URL.

Signature

httpsValidator(control: AbstractControl): ValidationErrors | null

Returns

A validator function that returns {invalidUrl: true} if the URL is not HTTPS, or null if valid.