Как создать валидатор, который проверяет начало ссылки?

Для создания валидатора, который будет проверять начало ссылки в Angular, мы можем использовать встроенный класс Validators и его методы.

Первым шагом мы должны создать новый валидатор внутри нашего компонента Angular. Для этого мы можем использовать декоратор @Directive. Директива - это наши пользовательские валидаторы, которые мы можем добавить к элементам формы.

Пример кода для создания валидатора, который проверяет начало ссылки, может выглядеть следующим образом:

import { Directive } from '@angular/core';
import { ValidatorFn, AbstractControl, ValidationErrors, NG_VALIDATORS, Validator } from '@angular/forms';

@Directive({
  selector: '[urlStartsWithValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: UrlStartsWithValidatorDirective, multi: true }
  ]
})
export class UrlStartsWithValidatorDirective implements Validator {

  validate(control: AbstractControl): ValidationErrors | null {
    const urlStartsWith = 'https://';
    const url = control.value.toLowerCase();

    if (!url.startsWith(urlStartsWith)) {
      return { urlStartsWith: true };
    }

    return null;
  }

}

В этом примере мы создаем директиву с селектором [urlStartsWithValidator]. Затем мы указываем, что наш валидатор будет использоваться внутри TAG формы с помощью провайдера NG_VALIDATORS.

В методе validate мы получаем значение элемента формы и проверяем, начинается ли оно со строки 'https://'. Если нет, мы возвращаем объект с ошибкой { urlStartsWith: true }. Если все в порядке, мы возвращаем null, что означает, что значение прошло проверку.

Если мы хотим использовать этот валидатор в нашей форме, мы должны добавить директиву [urlStartsWithValidator] к соответствующему элементу формы.

Например, если у нас есть инпут с именем url, мы можем добавить валидатор следующим образом:

<input type="text" name="url" [urlStartsWithValidator]="true" [(ngModel)]="urlValue">
<div *ngIf="url.invalid && (url.dirty || url.touched)">
  <div *ngIf="url.errors.urlStartsWith">Ссылка должна начинаться на 'https://'</div>
</div>

В приведенном выше примере мы добавляем атрибут [urlStartsWithValidator]="true" к <input> элементу, чтобы связать его с нашим валидатором. Затем мы проверяем статус валидации url.invalid внутри <div> с помощью директивы *ngIf. Если валидация не прошла и элемент формы был изменен (url.dirty) или коснулся (url.touched), мы показываем сообщение об ошибке.

Это все, теперь у вас есть валидатор, который проверяет начало ссылки в Angular. Вы можете создать другие пользовательские валидаторы, используя аналогичный подход и изменяя проверки и сообщения об ошибке на свое усмотрение.